检测通过 window.open 打开的新窗口是否加载完成

本文详解如何可靠检测 `window.open` 创建的弹出窗口是否完成加载，重点解决跨浏览器兼容性问题，并提供基于 `document.read

在 Web 开发中，使用 window.open() 动态创建新窗口后，常需在其内容加载完毕时执行样式修改、脚本注入或数据通信等操作。然而，直接监听 DOMContentLoaded 或设置 onload 回调往往失效——这是因为新窗口初始为空文档（about:blank），其 document 对象虽已存在，但事件监听器无法正确绑定到尚未构建完成的 DOM 上；同时，若新窗口跳转至跨域 URL，还会因同源策略限制而完全无法访问其 document。

最稳定、兼容性最佳的方案是轮询检查 document.readyState 状态。当 win.document.readyState === 'complete' 时，表示该窗口文档及其所有子资源（如 CSS、图片、内联脚本）均已加载完毕，此时可安全操作 DOM：

  
  


  Open window

✅ 关键要点说明：

• 必须使用 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 窗口加载完成的黄金标准——它不依赖事件绑定时机，不违反同源策略前提下的访问逻辑，且具备出色的浏览器兼容性。

# 还会  # 这是  # 能在  # 加载  # safari  # 文档  # 绑定  # 跳转  # 时应  # 你将  # 浏览器  # css  # win  # https  # edge  # js  # 对象  # html  # chrome  # access  # 事件  # 封装  # try  # catch  # dom  # location  # 跨域  # href  # firefox  # 数据通信 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】