a) 是否可通过同一个MutationObserver同时检测主文档body及iframe内的DOM变化？ #

答案是不行。每个浏览器上下文（主文档和iframe各自的window/document）都是相互独立的，MutationObserver实例是绑定在它所属的文档上下文里的。你在主文档创建的Observer，只能监听主文档内的节点变化，没办法跨上下文去监听iframe里的DOM——哪怕是同源的iframe也不行，因为iframe的document是完全独立的另一个文档对象，不属于主文档的上下文。

b) 若单观察者无法实现，有何种替代方案？ #

根据iframe是否和主文档同源，有两种不同的处理思路：

1. 同源场景（主文档和iframe域名/协议/端口一致）

这种情况主文档可以直接访问iframe的内部文档，我们可以分两步走：

• 首先，用主文档的MutationObserver监听自身body，检测是否有新的iframe节点被添加进来；
• 对每个加载完成的iframe，获取它的contentDocument.body，然后在这个iframe的文档上下文中创建新的MutationObserver实例，专门监听它内部的DOM变化。
  示例代码大概是这样的：

  // 监听主文档新增iframe
  const mainObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'IFRAME') {
          // 等待iframe加载完成
          node.onload = () => {
            const iframeDoc = node.contentDocument;
            // 在iframe文档内创建Observer
            const iframeObserver = new MutationObserver((iframeMutations) => {
              // 这里处理iframe内的DOM变化逻辑
              console.log('iframe DOM changed', iframeMutations);
            });
            iframeObserver.observe(iframeDoc.body, {
              childList: true,
              subtree: true,
              // 按需添加其他配置项
            });
          };
        }
      });
    });
  });
  mainObserver.observe(document.body, { childList: true, subtree: true });
  

2. 跨域场景（主文档和iframe不同源）

这种情况主文档没法直接访问iframe的contentDocument，所以只能通过**跨文档通信（postMessage）**来实现：

• 需要在iframe内部的代码中部署MutationObserver，监听自身的DOM变化；
• 当iframe内检测到DOM变化时，通过window.parent.postMessage()把变化信息发送给主文档；
• 主文档监听message事件，接收iframe发来的消息并处理。
  注意：这种方案的前提是你有权修改iframe内部的代码，如果iframe是第三方页面且无法修改，那主文档完全没办法监听它的DOM变化。

另外还要注意：如果页面中会动态添加多个iframe，一定要确保每个iframe都被正确绑定对应的Observer，避免遗漏。

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