变异观察者未触发

问题描述

嗨，我正在建立一个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如何加载页面（请参阅： ）

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