本文详解如何可靠检测 `window.open` 创建的弹出窗口是否完成加载，重点解决跨浏览器兼容性问题，并提供基于 `document.readystate` 的轮询方案及最佳实践。
在 Web 开发中，使用 window.open() 动态创建新窗口后，常需在其内容加载完毕时执行样式修改、脚本注入或数据通信等操作。然而，直接监听 DOMContentLoaded 或设置 onload 回调往往失效——这是因为新窗口初始为空文档（about:blank），其 document 对象虽已存在，但事件监听器无法正确绑定到尚未构建完成的 DOM 上；同时，若新窗口跳转至跨域 URL，还会因同源策略限制而完全无法访问其 document。
最稳定、兼容性最佳的方案是轮询检查 document.readyState 状态。当 win.document.readyState === 'complete' 时，表示该窗口文档及其所有子资源（如 CSS、图片、内联脚本）均已加载完毕，此时可安全操作 DOM：
<html>
<head>
<title>Opening window with JS</title>
<script>
const openWindow = () => {
const win = window.open('', '_blank', 'top=20,left=20,width=200,height=200');
// 关键：轮询 readyState，避免过早访问 document
const intervalId = setInterval(() => {
try {
// 注意：需用 try-catch 捕获跨域异常（如打开非同源 URL）
if (win && !win.closed && win.document.readyState === 'complete') {
clearInterval(intervalId);
console.info('Child window loaded');
win.document.body.style.background = 'hotpink';
win.document.title = 'Loaded!';
}
} catch (e) {
// 跨域时抛出 SecurityError，此时应停止轮询并提示用户
console.warn('Cannot access child window (cross-origin):', e.message);
clearInterval(intervalId);
}
}, 100); // 每 100ms 检查一次，平衡响应性与性能
};
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('open').addEventListener('click', openWindow);
});
</script>
</head>
<body>
<button id="open">Open window</button>
</body>
</html>✅ 关键要点说明：
- 必须使用 setInterval + readyState === 'complete'：这是目前唯一能在所有主流浏览器（Chrome/Firefox/Safari/Edge）中稳定工作的通用方案；
- 务必添加 try...catch：当新窗口加载跨域页面（如 https://example.com）时，访问 win.document 会触发 SecurityError，不捕获将导致脚本中断；
- 检查 win && !win.closed：防止窗口被用户手动关闭后仍继续轮询；
- 避免 win.onload 或 win.document.addEventListener('load')：这些事件在 window.open('', ...) 创建的空白窗口中不可靠，且不适用于后续 location.href 跳转场景；
- 不推荐 document.write() 注入 HTML：该方式会覆盖原始文档结构，破坏现代框架兼容性，且难以维护和调试。
⚠️ 注意事项：
- 若目标 URL 与当前页面不同源，你将无法读取或修改其 DOM，此时应改用 postMessage 进行跨窗口通信，并由子页面主动发送 'loaded' 消息；
- 轮询间隔不宜过短（如 10ms），否则可能造成不必要的 CPU 占用；50–200ms 是合理范围；
- 在生产环境建议封装为可复用函数，并支持超时机制（例如 10 秒未加载则自动清理）。
综上，document.readyState === 'complete' 配合轮询是检测 window.open 窗口加载完成的黄金标准——它不依赖事件绑定时机，不违反同源策略前提下的访问逻辑，且具备出色的浏览器兼容性。
