10

まだ作成されていない要素の外観を Chrome 拡張機能にリッスンさせることは可能ですか?

ユーザーがボタンをクリックすると、クリック イベントによって要素が作成<div id='myDiv'>My Div</div>され、ページ/DOM に追加されるとします。その要素が表示されたときにイベントを自動的に発生させるリスナーを設定することは可能ですか?

それとも、ページをポーリングして、X ミリ秒ごとにこの要素をチェックする必要がありますか?

jQuery やその他のライブラリは、私にとって選択肢ではありません。

4

2 に答える 2

13

新しい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、パフォーマンスがいくらか向上します。

于 2012-06-21T15:47:15.363 に答える
3

Arrival.jsを使用できます。Mutation Observers APIをラップします。使用法：

document.arrive(".test-elem", function() {
    // 'this' refers to the newly created element
    var newElem = this;
});
于 2014-04-01T17:43:05.623 に答える