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

Question

我有这样的东西：

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

getDownloadLink方法必须先POST得到一个url然后window.open(url)触发下载，但是我发现浏览器会屏蔽window.open行为。我怎样才能防止这种情况发生？

我在Whosebug上看到很多类似的问题，但是还是没有找到解决我问题的方法。而且我发现 aws s3 页面做了类似的事情，该页面不会被浏览器阻止。所以...我认为必须有一些方法来处理这个问题。

Answer 1

不要使用 window.open，只需让浏览器执行它已知的 HTML 操作：构建一个 link 锚点，然后单击它。

// 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);
}

通过这种方式，您只是告诉浏览器 "open a link the normal way"，它会很乐意这样做，而不是阻止有问题的 API，这些 API 曾被用于弹出窗口和其他可疑目的。

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

How to open an url and download without being block

javascript

popupwindow

reactjs