本文介绍如何可靠检测 `window.open` 创建的弹出窗口（新窗口）是否已完全加载，解决 `domcontentloaded`、`onload` 等事件在跨文档场景下失效的问题，并提供基于 `document.readystate === 'complete'` 的轮询方案及最佳实践。
在使用 window.open() 动态创建新窗口时，开发者常期望能监听其加载完成状态，以便执行 DOM 操作、注入脚本或更新样式。然而，直接在父窗口中为子窗口绑定 DOMContentLoaded 或 load 事件（如 win.document.addEventListener('DOMContentLoaded', ...) 或 win.onload = ...）几乎总是失败——原因在于：新窗口初始为空文档（about:blank），其 document 对象虽可访问，但事件监听器无法正确挂载到尚未构建完成的上下文；更关键的是，若子窗口后续跳转至跨域 URL（如 https://example.com），父窗口将因同源策略限制彻底失去对子窗口 document 的读写权限，导致所有 DOM 相关检测逻辑失效。
因此，唯一稳定、跨浏览器且兼容同源/跨域场景的通用方案是轮询 win.document.readyState。根据 HTML 规范，当 readyState 变为 'complete' 时，意味着该窗口的文档及其所有子资源（CSS、图片、脚本等）均已加载完毕，load 事件即将触发——这正是我们所需的“页面完全就绪”信号。
以下是一个健壮的实现示例：
<!DOCTYPE html>
<html>
<head>
<title>Opening window with JS</title>
<script>
const openWindow = () => {
// 打开一个空白新窗口（注意：必须指定 URL 或留空，避免默认导航）
const win = window.open('', '_blank', 'top=20,left=20,width=200,height=200');
// 轮询检测 readyState，间隔 100ms 是平衡性能与响应性的合理选择
const intervalId = setInterval(() => {
try {
// 尝试访问子窗口 document（可能因跨域抛错，需捕获）
if (win && !win.closed && win.document && win.document.readyState === 'complete') {
clearInterval(intervalId);
console.info('Child window loaded');
// ✅ 此时可安全操作同源子窗口的 DOM
if (win.location.origin === window.location.origin) {
win.document.body.style.background = 'hotpink';
win.document.title = 'Loaded!';
}
}
} catch (e) {
// 跨域时访问 win.document 会抛 SecurityError，此时停止轮询并降级处理
clearInterval(intervalId);
console.warn('Cross-origin window detected. DOM manipulation disabled.', e);
}
}, 100);
return win;
};
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('open').addEventListener('click', openWindow);
});
</script>
</head>
<body>
<button id="open">Open window</button>
</body>
</html>✅ 关键要点说明：
- 必须使用 setInterval + readyState 轮询：这是目前最可靠的方式，不受事件绑定时机和跨域限制影响；
- 添加 try/catch 包裹：防止跨域窗口访问 win.document 时抛出 SecurityError 导致脚本中断；
- 检查 win.closed 和 win 存在性：避免窗口被用户手动关闭后继续轮询；
- 同源判断再操作 DOM：仅当 win.location.origin === window.location.origin 时才执行样式/内容修改，确保安全性；
- 避免 document.write() 方案：该方法会覆盖整个文档，且在现代浏览器中已被标记为不推荐，易引发兼容性问题与 CSP 限制。
⚠️ 注意事项：
- 若子窗口最终加载的是跨域页面（如 https://google.com），父窗口无法读取其 document 内容或监听页面事件，仅能通过 postMessage 进行受控通信；
- 轮询间隔不宜过短（如 10ms），否则增加 CPU 开销；也不宜过长（如 1000ms），影响用户体验；100ms 是广泛验证的平衡值；
- 某些浏览器（如 Safari）对弹出窗口有严格限制，需确保 window.open() 是由用户手势（如 click）直接触发，否则可能被拦截。
综上，document.readyState === 'complete' 轮询是检测 window.open 窗口加载完成的黄金标准。它简洁、兼容、可控，应作为此类场景的首选方案。
