2

我正在尝试使用 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）时，代码开始正常工作，此时添加的所有图像都被打印出来。同样的事情当我重新调整打开的控制台大小时发生。

我是否必须为配置值设置其他参数？为什么打开控制台突然使代码工作？

4

1 回答 1

1

文档的子列表几乎从不改变。通常只是一个<html>独生子女。您可能想要subtree: true在您的config, 以便在文档深处添加图像时运行观察者。

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

于 2015-04-13T22:58:56.327 回答