window.open打开_blank新窗口后location.reload执行被阻塞问题咨询

问题根因 #

• 原有代码存在两处语法错误：location. hostname 中间多余空格、拼接端口的冒号未包裹为字符串，语法错误会干扰后续代码执行时序
• 部分浏览器处理window.open打开新窗口的逻辑会占用主线程同步栈，导致后续的location.reload()被挂起，直到新窗口关闭才会触发执行

解决方案 #

将location.reload()逻辑异步化，放入宏任务队列等待执行，避开window.open的同步阻塞即可。修正后代码如下：

// 打开新窗口，已修正原代码语法问题
window.open(location.protocol + '//' + location.hostname + ':' + location.port + '/print_receipt/' + res[0], '_blank');
// 异步触发当前页面重载，无需等待新窗口关闭
setTimeout(() => {
  location.reload();
}, 0);

方案说明 #

setTimeout设置0延迟时，不会立刻执行回调，而是等待当前主线程的所有同步任务（包含window.open的初始化逻辑）执行完成后再调用回调，完美避开新窗口的阻塞逻辑，实现新窗口打开后立刻重载原页面的需求。

内容的提问来源于stack exchange，提问作者justice