如何打开网址并下载而不被阻止

Question

I have something like this:

<a 
  onClick={e => { getDownloadLink()
                     .then(url => window.open(url)) }}>Download</a>

the getDownloadLink method have to first POST to get a url and then trigger the download by window.open(url) ，but I found that the browser will block the window.open behavior. How can I prevent that?

I see a lot of questions similar in stackoverflow, but I still didn't find a method to solve my problem. And I found that the aws s3 page do something similar, the page will not being blocked by browser. So... I think there must be some method to handle this.

Answer 1

Don't use window.open , just make the browser do what it already knows to do with HTML: build a link anchor, then click it.

// create an temporary, invisible link and open it in a new tab
function openURL(url) {
  var a = document.createElement("a");
  a.setAttribute("target", "_blank");
  a.href = url;
  a.style.display = "none";
  // you can't click a link unless it's part of the document:
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

This way you're telling the browser to just "open a link the normal way", and it'll happily do so instead of blocking questionable APIs that have a history of being used for popups and other questionable purposes.