如何在window.open创建的新窗口中使用MutationObserver？

这个问题我之前也踩过坑，核心原因是你在新窗口的DOM还没准备好的时候就绑定了MutationObserver，导致监听的是一个即将被浏览器替换的空白文档，自然捕获不到后续的DOM变化。

为什么原代码不生效？ #

当你调用window.open('/somepath')时，浏览器会立刻返回一个窗口对象，但此时新窗口里的document还是初始的空白状态（对应about:blank）。当新页面开始加载时，浏览器会完全替换这个document对象——你之前绑定的Observer是监听旧的空白document，对新加载的页面DOM完全没有作用。

修复后的代码 #

你需要等待新窗口的DOM初始化完成后，再启动MutationObserver。可以通过监听新窗口的DOMContentLoaded事件（这个事件在DOM树构建完成后触发，比load事件更早）来实现：

var newWin = window.open('/somepath');

// 等待新窗口的DOM构建完成
newWin.addEventListener('DOMContentLoaded', function() {
  var observerConfig = { childList: true, subtree: true, attributes: false, characterData: false };
  var obs = new newWin.MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (!mutation.addedNodes) return;
      mutation.addedNodes.forEach(function(addedNode) {
        console.log(addedNode);
      });
    });
  });
  // 此时监听的是新页面已初始化的document
  obs.observe(newWin.document, observerConfig);
});

额外注意点 #

如果新打开的页面是跨域的（比如域名、协议、端口和原窗口不一致），浏览器的同源策略会阻止你访问新窗口的document对象，这种情况下这种方法就会失效。不过你的路径是同域的/somepath，所以不用担心这个问题。

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