Javascript 突变观察者不开火
嗨,我正在构建一个chrome扩展。我有一个javascript文件,我想在其中检测facebook.com上div的变化,所以我将其附加到一个变异观察者。现在的问题是,如果我在Facebook上导航到另一个页面,比如单击主页按钮,突变观察者将停止工作,即使这个新页面中存在具有相同id的div。它只在我刷新页面后才开始工作。有没有办法解决这个问题 此外,我所有的代码都封装在document.ready jquery函数中,因此我假设当我通过单击home按钮导航到新的facebook页面时,该函数会自动触发,但这不会发生。它仅在我显式键入url或在导航后刷新页面时激发 代码如下所示:Javascript 突变观察者不开火,javascript,jquery,html,facebook,google-chrome-extension,Javascript,Jquery,Html,Facebook,Google Chrome Extension,嗨,我正在构建一个chrome扩展。我有一个javascript文件,我想在其中检测facebook.com上div的变化,所以我将其附加到一个变异观察者。现在的问题是,如果我在Facebook上导航到另一个页面,比如单击主页按钮,突变观察者将停止工作,即使这个新页面中存在具有相同id的div。它只在我刷新页面后才开始工作。有没有办法解决这个问题 此外,我所有的代码都封装在document.ready jquery函数中,因此我假设当我通过单击home按钮导航到新的facebook页面时,该函数
$ (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检测这些单独的变化
现在的问题是,如果我在Facebook上导航到另一个页面,比如单击主页按钮,突变观察者将停止工作,即使这个新页面中存在具有相同id的div
对,因为即使它有相同的id
,它也是一个不同的元素
如果你想观察新元素的变异事件,你必须设置一个观察新元素的新变异观察者,可能通过响应Chrome的“页面加载”事件。如果脚本在页面加载之间持续,您还需要确保释放上一个观察者
所以我假设当我通过点击主页按钮导航到一个新的facebook页面时,它会自动触发,但这并没有发生
我不会假设,我会假设它会在注入的页面上运行,而不是在任何其他页面上运行。确保在页面加载完成时运行扩展的地址。没有代码的情况下“关于如何修复此问题的想法?”?可能不会。请看一看,并通读,特别是这是一个内容脚本,因为我的代码是包装在文档中的。准备好了吗?它不应该每次加载页面时都运行吗?我认为问题在于facebook如何加载页面。例如,在我的控制台中,如果我在其他网站(如github)上通过单击我的控制台日志“Navigated to…”的链接从github.com导航到repo,则在我的控制台中选中保留日志。然而,如果我在Facebook主页上,说我通过点击他们的链接导航到Facebook群组,它不会显示“导航到…”,这让我假设浏览器认为这些是相同的页面。