如何在新创建的 window 上使用 MutationObserver

Question

我想使用 MutationObserver 来跟踪我用 window.open 创建的 window 中的 DOM 变化。我有以下代码：

var newWin = window.open('/somepath');
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);
        });
    })
});
obs.observe(newWin.document, observerConfig);

我希望看到一些新添加的节点记录在控制台中（正如我以相同的方式跟踪原始 window 时得到的一样，同一个观察者），但我什么也没得到。我错过了什么吗？

Answer 1

这与您在使用 JavaScript（例如 <head> 中的脚本）修改当前文档的 DOM 时遇到的问题相同，在 DOM 已加载：此时您将尝试访问内存中不存在的元素。

当 DOM 已加载并准备好操作时，您将使用 DOMContentLoaded 事件触发回调。

同样，当您尝试访问新 window 的 DOM 时，那个 window 可能还没有完成加载。

您应该将 obs.observe 调用包装在 load 事件侦听器中：

newWin.addEventListener('load', function() {
    obs.observe(newWin.document.body, observerConfig);
}, true);

这样，当您开始观察尸体时，您就可以确定它确实存在！

如何在新创建的 window 上使用 MutationObserver

How to use MutationObserver on a newly created window

javascript

asynchronous

window.open

mutation-observers