本文介绍一种可靠、跨浏览器兼容的方法，利用 `document.readystate` 配合轮询机制，准确判断 `window.open()` 创建的新窗口是否已完全加载（包括 html、css、js 及所有子资源）。
在 Web 开发中，使用 window.open() 打开新窗口后，常需在其内容加载完成后执行操作（如修改样式、注入脚本或通信）。但直接监听 DOMContentLoaded 或 load 事件往往失败——原因在于：新窗口初始为空文档（about:blank），其 document 对象虽存在，但事件监听器无法绑定到尚未构建完成的 DOM 上；且跨源限制（CORS）会阻止对非同源页面的访问，导致 win.document 报错。
你尝试的三种方式均存在根本性问题：
- ✅ win.document.addEventListener('DOMContentLoaded', ...)：失败，因新窗口初始无完整 DOM 结构，且事件可能早已触发；
- ❌ win.onload = ...：window.onload 在 window.open() 返回时不可靠，尤其当目标为 about:blank 或跨域页面时，该属性不可写或被忽略；
- ⚠️ document.write() 注入 HTML：虽可控制内容，但易引发 document.write() 覆盖风险、<script> 执行时机不可控，且 window.body.style.background 写法错误（应为 document.body.style.background）。
✅ 正确解法：轮询 win.document.readyState
document.readyState 有三个值：loading、interactive、complete。其中 'complete' 表示文档及所有子资源（图片、样式表、脚本等）均已加载完毕，等价于 load 事件触发时刻。由于该属性在新窗口创建后即可安全读取（即使为 about:blank），我们可通过 setInterval 定期检查，直到状态变为 'complete'，再执行后续逻辑并清除定时器。
以下是完整、健壮的实现代码：
<!DOCTYPE html>
<html>
<head>
<title>Opening window with JS</title>
<script>
const openWindow = () => {
// 打开空白窗口（同源前提下可操作）
const win = window.open('', '_blank', 'top=20,left=20,width=200,height=200');
// 兜底：若窗口被拦截，win 为 null
if (!win || win.closed) {
console.warn('Popup blocked or failed to open.');
return;
}
// 轮询检测 readyState
const intervalId = setInterval(() => {
try {
// 注意：跨域窗口会抛出 SecurityError，需 try-catch
if (win.document && win.document.readyState === 'complete') {
clearInterval(intervalId);
console.info('Child window loaded successfully.');
win.document.body.style.background = 'hotpink';
win.document.title = 'Loaded!';
}
} catch (e) {
// 跨域时捕获异常，停止轮询（无法进一步操作）
console.warn('Cross-origin window detected. Cannot access document.', e);
clearInterval(intervalId);
}
}, 100); // 每100ms检查一次，平衡性能与响应速度
};
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('open').addEventListener('click', openWindow);
});
</script>
</head>
<body>
<button id="open">Open window</button>
</body>
</html>? 关键注意事项：
- 同源限制：该方法仅适用于同源（协议+域名+端口完全一致）窗口。若打开的是跨域 URL（如 https://example.com），浏览器将禁止访问 win.document，此时 try...catch 是必需的；
- 弹窗拦截：现代浏览器默认拦截非用户手势触发的 window.open()，务必确保调用发生在 click 等用户交互事件中；
- 性能优化：轮询间隔建议设为 50–100ms；过短增加 CPU 负担，过长影响响应及时性；
- 兜底处理：始终检查 win 是否为 null 或已关闭，避免运行时错误。
? 进阶提示：如需与跨域子窗口通信，应改用 window.postMessage() 配合 message 事件，而非直接操作 DOM。
综上，readyState === 'complete' + setInterval 是目前最稳定、兼容性最佳的窗口加载检测方案，适用于绝大多数实际场景。
