Как открыть URL и скачать без блокировки

Question

У меня есть что-то вроде этого:

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

метод getDownloadLink должен сначала POST получить URL-адрес, а затем запустить загрузку с помощью window.open(url) ，, но я обнаружил, что браузер заблокирует поведение window.open. Как я могу предотвратить это?

Я вижу много похожих вопросов в stackoverflow, но я так и не нашел метод решения моей проблемы. И я обнаружил, что страница aws s3 делает что-то похожее, страница не будет заблокирована браузером. Итак ... Я думаю, что должен быть какой-то метод, чтобы справиться с этим.

Answer 1

Не используйте window.open, просто заставьте браузер делать то, что он уже знает, как делать с HTML: создайте привязку ссылки, затем щелкните по ней.

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

Таким образом, вы говорите браузеру просто «открыть ссылку обычным способом», и он с радостью сделает это вместо того, чтобы блокировать сомнительные API, которые имеют историю использования для всплывающих окон и других сомнительных целей.