javascript - 为什么我的 MutationObserver 回调没有为某些新标签执行？

Question

我正在开发一个影响页面上的 GIF 图像(除其他外)的 Chrome 扩展程序。我正在努力让它在初始页面加载后动态添加新图像。这是我添加到我的内容脚本中以尝试处理这些内容的内容:

function processGif(newTag) {
  console.log(newTag.src);
}

var observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if(newTag.tagName == "IMG" && /.gif$/i.test(newTag.src)) {
        processGif(newTag);
      }
    }
  }
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

出于测试目的，我已将 processGif 函数简化为标签的 src 属性的 console.log。

大多数情况下，它工作得很好，并成功捕获了在首次加载页面时最初构建 DOM 时创建的所有初始图像。但是在像 Google+ 这样的页面上，当您向下滚动时，MutationObserver 似乎没有捕捉到任何动态加载的帖子。我一直在使用 Koushik Dutta's public page出于测试目的——这家伙喜欢张贴 gif。如果您尝试将上述代码粘贴到控制台并向下滚动，您应该能够确认没有检测到任何动态加载的图像。

为什么我看不到这些动态添加的img标签，我需要做什么来处理这样动态添加的图片？

Answer 1

我想我明白发生了什么。您通过观察者获得的 addedNodes 列表实际上并不是已添加到 DOM 中的每个节点的列表，而是一次添加多个节点时的最顶层节点。

考虑到这一点，您只需处理每个添加的节点及其所有子节点。所以观察者回调需要修改成如下所示。

observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if (newTag.querySelectorAll) {
        Array.prototype.forEach.call(
          newTag.querySelectorAll('img[src*=".gif"]'),
          processGif);
      }
    }
  }
});