javascript - Chrome Mutation Observer

标签 javascript google-chrome mutation-observers

我正在尝试使用 Chrome 中的 Mutation Observer 来监控何时添加新图像，这是我目前的代码:

var observer = new window.MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var m = mutation;
        //console.log(m);
        for (var j = 0; j < m.addedNodes.length; j++)
        {
            var nodes=m.addedNodes[j];
            if (!nodes || !nodes.querySelectorAll)
            {
                // Not all nodes support querySelectorAll, e.g. text nodes.
                continue;
            }

            var imgs= nodes.querySelectorAll("img");
            for (var k = 0; k < imgs.length; k++)
            {
                if(imgs[k].src != undefined)
                {
                    var img = imgs[k];
                    console.log(img);
                }
            }
        }
    });
});

var config = { childList: true };
// pass in the target node, as well as the observer options
observer.observe(window.document, config);

一件奇怪的事情发生了:回调似乎被调用但没有找到任何图像。当我打开控制台(Ctrl+Shift+J)时，代码开始正常工作，所有图像到那时添加的内容被打印出来。当我重新调整打开的控制台大小时，也会发生同样的事情。

我是否必须为配置值设置额外的参数？为什么打开控制台突然使代码运行？

最佳答案

文档的子列表几乎从不改变。通常只是一个 <html> child 。你可能想要 subtree: true在你的config , 这样如果在文档深处添加图像，观察者就会运行。

这并不能解释为什么当控制台打开时代码可以正常工作。

关于javascript - Chrome Mutation Observer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23803301/