检测新打开窗口的加载完成状态：JavaScript 实现可靠监听页面就绪

本文介绍如何在使用 `window.open()` 创建新窗口后，准确、跨浏览器地检测其 dom 和资源是否完全加载，重点解决 `domcontentloaded` 和 `onload` 失效问题，并提供基于 `document.readystate === 'complete'` 的轮询方案。

当通过 window.open('', '_blank', ...) 打开一个空窗口（空白文档）时，许多开发者会尝试直接监听 win.document.addEventListener('DOMContentLoaded', ...) 或设置 win.onload —— 但这些方式通常失败。根本原因在于：新窗口初始文档为空（about:blank），且未显式写入内容前，其 document 对象尚未触发标准加载事件；同时，跨源限制和浏览器安全策略也导致事件监听器无法正确绑定或执行。

最可靠、兼容性最佳的解决方案是利用 document.readyState 属性配合轮询机制。根据 HTML 规范，readyState === 'complete' 表示文档及其所有子资源（如 CSS、图片、脚本）均已加载完毕，此时 load 事件即将触发——这正是我们所需的“页面真正就绪”信号。

以下为推荐实现（已优化健壮性）：

  
  


  Open window

✅ 关键要点说明：

• 必须使用 setInterval + readyState === 'complete'：这是目前唯一能在 about:blank 窗口及后续导航中稳定工作的通用方法；
• 务必添加 try/catch：若子窗口跳转至不同源（如 https://example.com），直接访问 win.document 将抛出 SecurityError，不捕获会导致脚本中断；
• 加入超时机制：防止因网络异常、页面重定向失败等导致轮询长期挂起；
• 避免 document.write() 方案：该方法会清空原有文档并强制重置 readyState，且在现代浏览器中已被标记为不推荐（deprecated），还可能引发 CSP 违规；
• 不依赖 onload 绑定：对 window.open() 返回的 win 对象设置 win.onload 仅在窗口首次加载时有效，且对 about:blank 不触发，故不可靠。

总结：检测 window.open() 新窗口加载完成，应放弃事件监听幻想，转而采用受控轮询 document.readyState，辅以错误处理与超时防护，即可在主流浏览器中实现高兼容、高可用的加载状态感知。

# ai  # 这是  # 加载  # 所需  # 已被  # 文档  # 首次  # 绑定  # 浏览器  # css  # 器中  # 重定向  # win  # https  # js  # 对象  # javascript  # java  # html  # access  # 事件  # try  # catch  # 抛出  # dom  # 跨域 

相关栏目： <？ｍｕｍａ $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; ?> 】