在网页开发中，我们经常需要借助 window.open 方法打开一个新的浏览器窗口或标签页，用于支付跳转、文件预览或第三方登录。但新窗口中的页面并不一定立刻可用，如果主窗口逻辑依赖其中的 DOM 或接口结果，就必须准确感知它是否已经加载完毕。由于浏览器安全策略与页面同源限制，检测方式不能一概而论。
一、同源场景下的直接监听方案
当通过 window.open 打开的地址与主页面属于同源（协议、域名、端口一致）时，JavaScript 可以合法访问新窗口的 window 对象及其文档状态。这是最简单也最可靠的情况，因为浏览器不会阻止同源页面之间的对象访问。
最直接的方式是拿到 open 方法返回的窗口引用，然后为其绑定 load 事件。load 事件会在新窗口中所有资源（图片、脚本、样式等）全部加载完成后触发，比 DOMContentLoaded 更严格，适合需要操作完整页面的场景。以下代码演示了基本用法：
// 打开同源页面并监听加载完成
var popup = window.open('/same-origin-page.html', '_blank');
if (popup) {
popup.addEventListener('load', function () {
console.log('新窗口已完全加载');
// 此时可安全访问 popup.document
var title = popup.document.title;
});
} else {
console.warn('浏览器拦截了弹窗，请检查弹出设置');
}
需要注意的是，部分浏览器会将非用户手势触发的 window.open 视为广告弹窗而拦截，此时返回值为 null。因此实际项目中应先判断返回值，并引导用户手动允许弹窗。
如果希望在 DOM 解析完成但资源未加载完时就开始交互，也可以轮询 document.readyState，不过这通常没有必要，因为 load 事件已经覆盖了绝大多数需求，且不会占用主线程。
二、跨域场景的 iframe 代理方案
当新窗口地址属于其他域，例如跳转到 ipipp.com 的支付页，主窗口无法直接读取其 document，访问 popup.document.readyState 会抛出 DOMException。此时可以利用一个同源中间页，里面嵌入指向目标地址的 iframe，通过 iframe 与父页通信来间接判断加载状态。
具体做法是：主页面打开一个同源的 proxy.html，该页面内写入一个 iframe，src 设为跨域目标。proxy.html 监听 iframe 的 load 事件，再通过 window.opener.postMessage 把消息送回主页面。由于 proxy.html 和主页面同源，postMessage 不受跨域限制。代码如下：
<!-- proxy.html 同源代理页 -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<iframe id="target" src="https://ipipp.com/pay" style="width:100%;height:100%;border:0;"></iframe>
<script>
var frame = document.getElementById('target');
frame.addEventListener('load', function () {
// 通知 opener 加载完成
window.opener.postMessage({ type: 'popup-loaded' }, '*');
});
</script>
</body>
</html>
主页面在打开 proxy.html 后，只需监听 message 事件即可：
var proxy = window.open('/proxy.html', '_blank');
window.addEventListener('message', function (e) {
if (e.data && e.data.type === 'popup-loaded') {
console.log('跨域目标页面已在代理窗中加载完毕');
}
});
这种方案的优点是不依赖目标站配合，只要目标页能在 iframe 中加载（未被 X-Frame-Options 拒绝）就能生效。缺点是多了一层中间页，用户体验上会先看到代理页再渲染目标内容，且如果目标站禁止被框架嵌入就会失败。
三、目标页主动通信方案
如果跨域目标页由你自己的另一套系统控制，或者对方愿意提供加载回调，最优解是让目标页在自身 load 完成后，主动向 opener 发送信号。这要求目标页代码里加入少量通信逻辑，但主页面检测最为精准且无需代理。
目标页在加载结束时判断 window.opener 是否存在，并调用 postMessage。主页面同样监听 message。示例如下：
// 目标页（https://ipipp.com/pay）底部脚本
window.addEventListener('load', function () {
if (window.opener && !window.opener.closed) {
window.opener.postMessage({ event: 'loaded', from: location.href }, '*');
}
});
主页面代码：
var win = window.open('https://ipipp.com/pay', '_blank');
window.addEventListener('message', function (e) {
if (e.data && e.data.event === 'loaded') {
console.log('目标页加载完成，来源：' + e.data.from);
}
});
该方式实时性好，没有中间跳转，也不会受 iframe 嵌入限制影响。但前提是你能修改目标页或对方提供接口，纯第三方无合作页面无法使用。
四、常见误区与对比总结
不少开发者试图用 setInterval 不断访问 popup.document.readyState 来判断加载，这种做法在跨域时会直接报错，在同域时也会造成不必要的主线程开销，且无法区分资源加载与脚本执行异常。应优先使用事件驱动而非轮询。
| 方案 | 适用条件 | 准确性 | 额外依赖 |
|---|---|---|---|
| 直接监听 load | 同源 | 高 | 无 |
| iframe 代理 | 跨域且目标可嵌 iframe | 中高 | 同源代理页 |
| 目标页主动通信 | 跨域且可改目标页 | 高 | 目标页配合 |
综合来看，检测 window.open 新窗口加载完成的核心在于绕开同源限制并利用浏览器事件。实际选型时，先确认打开地址是否同源，再决定采用原生监听还是通信桥接，才能写出健壮的前台弹窗控制逻辑。
window_openload_eventiframe_proxy修改时间：2026-08-01 13:06:31