是否有JavaScript / jQuery DOM更改侦听器？

 

基本上我想在DIV的内容发生变化时执行脚本。 由于脚本是分开的（Chrome扩展和网页脚本中的内容脚本），因此我需要一种简单的方式观察DOM状态的变化。 我可以设置投票，但似乎马虎。

此答案的旧内容现已被弃用。
查看基于MutationObserver的其他答案。

几年后，现在有了一个更好的解决方案。 DOM4突变观察者是不推荐的DOM3突变事件的替代品。 它们目前在现代浏览器中被实现为MutationObserver （或者作为旧版Chrome中的供应商前缀WebKitMutationObserver ）： 

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

本示例监听document及其整个子树上的DOM更改，它将触发元素属性更改以及结构更改。 草案规范有一个有效的突变监听器属性的完整列表：

的childList

  • 如果要观察目标儿童的突变，则设为true 。

    • 属性

  • 如果要观察目标属性的突变，则设置为true 。

    • characterData

  • 如果要观察目标数据的突变，则设为true 。

    • 子树

  • 如果突变不仅仅针对目标，而且目标的后代将被观察，则设为true 。

    • attributeOldValue

  • 设置为true ，如果attributes需要记录突变之前设置为true和目标的属性值。

    • characterDataOldValue

  • 设置为true ，如果characterData需要记录突变之前设置为true和目标的数据。

    • attributeFilter

  • 如果不是所有的属性突变都需要被观察，则设置为属性本地名称列表（无名称空间）。

    • （此列表截至2014年4月为止;您可以查看规范以了解是否有任何更改。）

    许多网站使用AJAX动态添加/显示/更改内容。 有时使用它来代替现场导航，因此当前URL以编程方式更改，并且浏览器不会自动执行内容脚本，因为该页面不是从远程服务器完全获取的。

    检测内容脚本中可用页面更改的常用JS方法。

  • MutationObserver （docs）从字面上检测DOM更改：

  • 如何在页面加载时更改HTML内容
  • MutationObserver检测整个DOM中的节点的性能。

  • 通过发送DOM事件来标记内容更改的站点的事件侦听器：

  • pjax:end许多基于pjax的站点使用的document ，例如GitHub，
    请参阅如何在pjax加载之前和之后运行jQuery？
  • 在Chrome浏览器中使用的window message ，
    请参阅Chrome扩展程序检测Google搜索刷新
  • spfdone在Youtube使用的document上，
    请参阅如何检测Youtube上的页面导航并在页面呈现之前修改HTML？

  • 通过setInterval定期检查DOM ：
    显然，只有在等待由其ID /选择器标识的特定元素出现的情况下，它才会起作用，除非您发明某种指纹识别现有内容，否则不会让您通用检测到新的动态添加的内容。

  • 在注入的DOM脚本中隐藏历史记录API： 

    document.head.appendChild(document.createElement('script')).text = '(' +
    function() {
        // injected DOM script is not a content script anymore, 
        // it can modify objects and functions of the page
        var _pushState = history.pushState;
        history.pushState = function(state, title, url) {
            _pushState.call(this, state, title, url);
            window.dispatchEvent(new CustomEvent('state-changed', {detail: state}));
        };
        // repeat the above for replaceState too
    } + ')(); this.remove();'; // remove the DOM script element

// And here content script listens to our DOM script custom events
window.addEventListener('state-changed', function(e) {
    console.log('History state changed', e.detail, location.hash);
    doSomething();
});

  • 听取hashchange，popstate事件： 

    window.addEventListener('hashchange', function(e) {
    console.log('URL hash changed', e);
    doSomething();
});
window.addEventListener('popstate', function(e) {
    console.log('State changed', e);
    doSomething();
});


    • 特定于扩展：检测后台/活动页面中的URL更改。

    有一些高级API可用于导航：webNavigation，webRequest，但我们将使用简单的chrome.tabs.onUpdated事件侦听器向内容脚本发送消息：

  • manifest.json的：
    申报背景/活动页面
    声明内容脚本
    添加"tabs"权限。

  • background.js 

    var rxLookfor = /^https?://(www.)?google.(com|ww(.ww)?)/.*?[?#&]q=/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});

  • content.js 

    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        doSomething();
    }
});
    • 链接地址: http://www.djcxy.com/p/91127.html

    上一篇: Is there a JavaScript/jQuery DOM change listener?

    下一篇: How can I get the URL of the current tab from a Google Chrome extension?