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地址确保在页面加载完成后运行扩展。

变异观察者没有开火

1 个答案: