JavaScript中Windows弹窗的onload事件不触发如何解决

问题原因 #

• 跨源安全限制：示例中打开的https://javascript.info和当前父页面不属于同一个源（协议、域名、端口三者任一不同就算跨源），浏览器的同源策略禁止父页面访问跨源弹窗的大部分属性、事件和DOM内容，绑定的onload事件会被浏览器屏蔽，自然无法触发。
• 绑定时机晚于事件触发：如果弹窗地址和父页面同源，仍有可能出现该问题——如果弹窗加载速度极快，在给newWindow绑定onload事件之前，弹窗的load事件已经执行完毕，后续绑定的回调自然不会被触发。

对应解决方法 #

场景1：弹窗地址与父页面同源 #

两种可选方案：

• 使用addEventListener绑定load事件，同时增加就绪状态兜底判断，避免漏触发：

let newWindow = open('/same-origin-page.html', 'example', 'width=300,height=300');
// 绑定load事件
newWindow.addEventListener('load', () => {
  alert("Popup Loaded");
});
// 兜底判断：如果弹窗已经加载完成，直接执行回调
if (newWindow.document.readyState === 'complete') {
  alert("Popup Loaded");
}

• 直接在弹窗页面内部编写onload逻辑，不需要父页面绑定事件。

场景2：弹窗地址与父页面跨源，且你可以控制弹窗页面的代码 #

通过postMessage跨源通信实现事件通知：

1. 父页面监听message事件，接收弹窗的加载完成通知：

let newWindow = open('https://cross-domain-site.com/page.html', 'example', 'width=300,height=300');
window.addEventListener('message', (e) => {
  // 必须校验消息来源，避免安全风险
  if (e.origin === 'https://cross-domain-site.com' && e.data === 'popup_loaded') {
    alert("Popup Loaded");
  }
});

2. 弹窗页面内部加载完成后，主动给父窗口发通知：

window.onload = () => {
  // 第二个参数填写父页面的源，生产环境不要用*通配符
  window.opener.postMessage('popup_loaded', 'https://parent-site.com');
};

场景3：弹窗地址与父页面跨源，且你无法控制弹窗页面的代码 #

浏览器没有提供可靠的API实现该需求，没有完美解决方案，仅可根据业务场景使用轮询检查newWindow.closed等极少数可访问属性的方式做近似判断，精度无法保障。

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