收听元素的创建,并在Chrome扩展程序中显示在页面上时触发事件

时间:2012-06-20 22:57:44

标签: javascript google-chrome google-chrome-extension

是否可以让Chrome扩展程序侦听尚未创建的元素的外观?

假设用户单击一个按钮,click事件会创建一个元素<div id='myDiv'>My Div</div>并将其添加到页面/ DOM。是否可以设置一个监听器,当该元素出现时会自动触发事件?

或者我是否必须采用轮询页面并每隔X毫秒检查一次这个元素?

jQuery和其他库不是我的选择。

2 个答案:

答案 0 :(得分:12)

新的DOM4 MutationObserver可以做到这一点。我认为它还没有被广泛支持,但幸运的是,Chrome支持它,WebKitMutationObserver

从链接的教程页面修改,它会在页面的任何位置侦听突变:

var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if(mutation.addedNodes[i].id == "myDiv") {
                // target node added, respond now...
            }
        }
    });
});
observer.observe(document, { subtree: true });

如果您可以将observer.observe中的收听范围缩小到比document更具体的元素,则可以获得一些性能提升。

答案 1 :(得分:2)

您可以使用arrive.js,它包裹Mutation Observers api。用法:

document.arrive(".test-elem", function() {
    // 'this' refers to the newly created element
    var newElem = this;
});