本文详解如何可靠检测 `window.open` 创建的弹出窗口是否完成加载，重点解决跨浏览器兼容性问题，并提供基于 `document.readystate` 的轮询方案及最佳实践。
在 Web 开发中，使用 window.open() 动态创建新窗口后，常需在其内容加载完毕时执行样式修改、脚本注入或数据通信等操作。然而，直接监听 DOMContentLoaded 或设置 onload 回调往往失效——这是因为新窗口初始为空文档（about:blank），其 document 对象虽已存在，但事件监听器无法正确绑定到尚未构建完成的 DOM 上；同时，若新窗口跳转至跨域 URL，还会因同源策略限制而完全无法访问其 document。
最稳定、兼容性最佳的方案是轮询检查 document.readyState 状态。当 win.document.readyState === 'complete' 时，表示该窗口文档及其所有子资源（如 CSS、图片、内联脚本）均已加载完毕，此时可安全操作 DOM：
Opening window with JS
✅ 关键要点说明：
- 必须使用 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 窗口加载完成的黄金标准——它不依赖事件绑定时机，不违反同源策略前提下的访问逻辑，且具备出色的浏览器兼容性。
