0

I'm working on a client site to download a PDF after submitting a form by opening the PDF url in a new tab on form submission. But in Chrome, Safari and FF, they're all blocking the "popup". I have noticed a few articles talking about ways to prevent browsers from blocking window.open(). They're usually relating to ajax but I'm not using ajax. The other articles talk about how window.open() only works inside a click event. And even that doesn't work for me.

It doesn't make a ton of sense but in my example I try triggering a click and 

<script>
    jQuery( document ).ready(function() {
        jQuery(".gform_confirmation_message a").on("click", function(e){
            e.preventDefault();
            var newWin = window.open("", "_blank");
            newWin.location = jQuery(".gform_confirmation_message a").attr("href");
        });

        jQuery(".gform_confirmation_message a").trigger("click");
    });
</script>

Even if I put a simple line outside jquery, doesn't work and gets blocked.

var newWin = window.open("", "_blank");

Also either of these on their own do absolutely nothing. It doesn't even bring up the popup blocked.

jQuery(".gform_confirmation_message a").trigger("click");
OR
jQuery(".gform_confirmation_message a").click();

I know browsers are hammering down on spam/ad security but this is ridiculous.

pinksharpii
  • 527
  • 1
  • 8
  • 18
  • A hidden iframe added to the page going to the url would probably be an effective work around. – Taplar Dec 07 '17 at 23:05
  • @Carcigenicate window.open() has been a javascript feature for ages. None of the other programmers on my team have heard anything specific about all browsers removing this function. – pinksharpii Dec 07 '17 at 23:05
  • Related: https://stackoverflow.com/questions/3077242/force-download-a-pdf-link-using-javascript-ajax-jquery – Chris Happy Dec 07 '17 at 23:06
  • If you just want to download a file, use HTML's `download` method. – Chris Happy Dec 07 '17 at 23:07
  • @pinksharpii It's not that the function is being removed, it's that rampant abuse of the function makes it inadvisable to use and allow. I haven't done web programming for awhile, so I can't speak for what the current status of things is, but this is another case of abusive people ruining a good thing for everyone. – Carcigenicate Dec 07 '17 at 23:08
  • @ChrisHappy I don't understand the download attribute. I tried adding it and nothing happens still. It has to happen on page load, not link click. – pinksharpii Dec 07 '17 at 23:10
  • @pinksharpii See answer. – Derek 朕會功夫 Dec 07 '17 at 23:12

1 Answers1

1

Popups are still possible. They just need to be triggered by a user action. Creating a fake click event is not considered a user action.

One way you can start the download is to simply redirect the page to the PDF with the correct content type set such that it will download immediately:

Content-Type: application/octet-stream

or 

Content-Disposition: attachment

With HTML5 you can also start a download by creating a temporary <a> tag and set its download attribute to the file url. A virtual click event will still work.

var textFile = new Blob(["hello world"], {type: "text/plain"});
var blobUrl = URL.createObjectURL(textFile);

var a = document.createElement("a");
a.href = blobUrl;
a.download = "myTextFile.txt";
a.click();  // start the download

I know browsers are hammering down on spam/ad security but this is ridiculous.

Popups are annoying. There are plenty of ways to download a file without creating a useless popup window.

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • a proper `content-disposition` response header can help too (re: content-type part of answer) – Jaromanda X Dec 07 '17 at 23:12
  • I wouldn't consider what I'm trying to do a "popup" but open a link in a new tab. We don't want users to be brought away from the site to view the PDF. This vanilla JS solution works pretty okay though, thanks. – pinksharpii Dec 07 '17 at 23:28
  • @pinksharpii Many browsers when redirecting the client to a location where the content type is an octet stream will only start the download and remains on the same page. It has the most backward compatibility while the HTML5 solution might not work in older browsers such as IE6. – Derek 朕會功夫 Dec 07 '17 at 23:33