突变观察者没有开火

Question

您好，我正在构建一个 chrome 扩展程序。我有一个 javascript 文件，我想在其中检测 facebook.com 上 div 的更改，因此我将其附加到突变观察者。现在的问题是，如果我通过单击主页按钮导航到 Facebook 上的另一个页面，即使这个新页面中存在具有相同 id 的 div，突变观察者也会停止工作。它只有在我刷新页面后才开始工作。关于如何解决此问题的任何想法？

此外，我的所有代码都包含在 document.ready jquery 函数中，因此我假设当我通过单击主页按钮导航到新的 facebook 页面时它会自动触发，但这不会发生。它仅在我显式键入 url 或导航后刷新页面时触发。

代码是这样的：

    $ (document).ready( function() {

  var observeDOM = (function(){
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
          eventListenerSupported = window.addEventListener;

      return function(obj, callback){
          if( MutationObserver ){
              // define a new observer
              var obs = new MutationObserver(function(mutations, observer){
                  if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                      callback();
              });
              // have the observer observe foo for changes in children
              obs.observe( obj, { childList:true, subtree:true });
          }
          else if( eventListenerSupported ){
              obj.addEventListener('DOMNodeInserted', callback, false);
              obj.addEventListener('DOMNodeRemoved', callback, false);
          }
      }
  })();


  if (document.getElementById('contentArea') !== null) {
    console.log("working");
    observeDOM( document.getElementById('contentArea') ,function(){

        console.log("DOM CHANGED");

    });
  }
});

更新：似乎问题在于 facebook 如何加载页面（请参阅：How facebook load pages?）

有什么方法可以检测通过 AJAX 发生的这些个别变化？

Answer 1

现在的问题是，如果我导航到 Facebook 上的另一个页面，比如单击主页按钮，即使这个新页面中存在具有相同 id 的 div，突变观察器也会停止工作。

对，因为即使它有相同的id，它也是一个不同的元素。

如果你想观察新元素的突变事件，你必须设置一个 new 突变观察者来观察新元素，可能是通过响应 Chrome 的“页面加载”事件。如果您的脚本在页面加载之间持续存在，您还需要确保释放之前的观察者。

所以我假设当我通过单击主页按钮导航到新的 Facebook 页面时它会自动触发，但这不会发生

我不会假设，我会假设它会在注入它的页面上运行，而不是任何其他页面。 This question and its answers 地址确保在页面加载完成时运行扩展。