javascript - 为什么 Chrome 在重定向时阻止打开新标签？

Question

我有一个带有特定链接的 react 应用程序。当用户单击链接时，它会打开一个新选项卡，并将当前页面重定向到主页。这就是我在 handleClick 函数中所做的事情:

window.location.href = '/';
const win = window.open('https://google.com', '_blank');
win.focus();

但是当我这样做时，Chrome 会阻止弹出窗口。由于重定向也会发生，因此弹出窗口被阻止的消息也会消失。但有趣的是，当我更改顺序时它会起作用，如下所示:

const win = window.open('https://google.com', '_blank');
window.location.href = '/';
win.focus();

知道为什么会发生这种情况吗？我浏览了文档，但找不到任何内容。我只是想确保第二种方法始终有效，并且 Chrome 将来不会停止阻止它。

要快速尝试此操作，您可以在 Chrome 控制台中按两个顺序执行以下两行:

window.location.href = 'https://yahoo.com';
window.open('https://google.com', '_blank');

Answer 1

当您将 window.location.href = '/'; 放在 window.open 之前时，浏览器已经加载新请求的页面，并卸载当前页面，因此该语句之后的任何脚本语句可能会也可能不会运行。这可能是您收到弹出窗口的原因。

但是在第二种情况下，window.open 首先正常运行，就像任何其他 JS 语句一样，然后重定向触发。