为何通过window.open()打开同一窗口时无法触发load事件？

这个问题我之前碰到过类似的情况，其实核心原因是当你用同一个target名称调用window.open()时，浏览器会复用已经存在的窗口实例，而不是创建全新的窗口，这就导致事件绑定的时机和你预期的不一样。

具体来说：

• 第一次点击按钮时，浏览器创建了新窗口，你给这个新窗口绑定load事件后，页面正常加载完成，事件自然触发，打印出"Hello World"。
• 第二次点击时，浏览器直接返回已经存在的那个窗口实例，同时会立刻让这个窗口导航到目标URL（也就是刷新myFile.html）。但你是在导航动作开始之后，才去给窗口绑定load事件——这时候load事件可能已经在你绑定之前就触发了，自然就没被监听到。而且旧页面被刷新时，之前绑定的事件监听器会随着旧页面的卸载被清除，所以第二次绑定的监听器根本赶不上这次刷新的load事件。

下面给你两个实用的解决办法：

解决方法一：先绑定事件，再触发导航 #

这种方法是先获取或创建目标窗口，先把load事件绑定好，再手动触发页面导航，能百分之百确保监听器在导航开始前就就位，不会错过load事件：

const childWindow = window.open('', 'my-target'); // 先获取已存在的窗口，不存在则创建新窗口
if (childWindow) {
  // 单独定义处理函数，方便后续移除重复绑定
  const handleWindowLoad = () => {
    console.log('Hello World');
  };

  // 先移除可能存在的旧监听器，避免多次点击后重复执行代码
  childWindow.removeEventListener('load', handleWindowLoad);
  // 绑定新的监听器
  childWindow.addEventListener('load', handleWindowLoad);

  // 手动触发导航到目标页面
  childWindow.location.href = 'myFile.html';
}

解决方法二：检查窗口加载状态，即时执行代码 #

如果还是想保留原来window.open()直接导航的写法，可以在绑定事件后，检查窗口是否已经加载完成。如果是的话，就直接执行一次处理函数，避免错过已经发生的load事件：

const childWindow = window.open('myFile.html', 'my-target');
if (childWindow) {
  const handleWindowLoad = () => {
    console.log('Hello World');
  };

  childWindow.addEventListener('load', handleWindowLoad);

  // 若窗口已经处于加载完成状态，立即执行处理逻辑
  if (childWindow.document.readyState === 'complete') {
    handleWindowLoad();
  }
}

小提醒 #

• 要注意Chrome的弹出窗口拦截规则：只有用户主动交互（比如按钮点击）触发的window.open()才不会被拦截，你的代码是在点击事件里执行的，这部分没问题。
• 尽量避免重复绑定事件：方法一里的removeEventListener能帮你清理旧的监听器，防止多次点击后代码重复执行。

备注：内容来源于stack exchange，提问作者Jarett Iverson