如何监听子框架的DOMContentLoaded事件？解决导航后监听失效问题

问题根源 #

你遇到的DOMContentLoaded事件无效的核心原因是：子框架导航到新页面时，原有的document对象会被完全销毁替换，你之前绑定在旧document上的事件自然不会触发；而等首个load事件触发后再绑定，此时新文档的DOMContentLoaded已经触发完毕（该事件早于load事件），所以也无法捕获。

优先解决方案（无需postMessage） #

同源场景下，你可以直接监听子框架window对象的readystatechange事件，当文档的readyState变为interactive时，就对应DOMContentLoaded的触发时机——此时DOM树已构建完成，无需等待图片、样式表等资源加载。

代码示例

假设你的frameset中子框架的名称为targetFrame，在父页面中执行以下代码：

const frameWindow = window.frames['targetFrame'];

// 绑定readystatechange事件到子框架window
frameWindow.addEventListener('readystatechange', () => {
  if (frameWindow.document.readyState === 'interactive') {
    // 此处编写DOM加载完成后的处理逻辑
    console.log('子框架DOM已加载完成，无需等待资源');
    // 可直接操作子框架DOM：frameWindow.document.querySelector(...)
  }
});

补充说明 #

1. 为什么这个方法有效？
   子框架的window实例在导航前后不会被销毁，始终保持唯一。通过监听其readystatechange事件，能捕获到新文档的状态变化；当readyState为interactive时，DOM解析完成，与DOMContentLoaded事件触发时机完全一致。

2. 是否有其他等价的window事件？
   你也可以直接监听子框架window的DOMContentLoaded事件（需使用捕获模式），效果与上述方案一致：

   frameWindow.addEventListener('DOMContentLoaded', () => {
     // DOM加载完成的处理逻辑
   }, true); // 捕获模式确保能捕获新文档的事件
   

3. 关于postMessage的备选性
   因你的场景是同源文档，完全不需要依赖postMessage，上述直接监听的方案更高效且简洁。只有在跨源场景下，才需要考虑postMessage配合子页面主动发送通知的方式。

内容的提问来源于stack exchange，提问作者Jake