8

私は自分のコードを修正して発行しようとしています。私はもともと、作業中のページ内の要素を監視するために DOMNodeRemoved と DOMNodeInserted を使用していました。それらはうまく機能しましたが、IE では機能しませんでした。そこで、MutationObserver を使ってみました。

onPageInit で呼び出されるコードは次のとおりです(コールバックはコンソールに書き込みますが、IE がコンソールをサポートしなくなったため、無効にしました):

var callback = function(allmutations){
    allmutations.map( function(mr){
        var mt = 'Mutation type: ' + mr.type;  // log the type of mutation
        mt += 'Mutation target: ' + mr.target; // log the node affected.
        //console.log( mt );
    })
}
mo = new MutationObserver(callback),
options = {
    // required, and observes additions or deletion of child nodes.
    'childList': true, 
    // observes the addition or deletion of "grandchild" nodes.
    'subtree': true
}
alert('its alive');
mo.observe(document.body, options);

クロムでは問題なく動作しますが、何らかの理由で IE ではうまくいきません。ページの読み込み中に、次のようなメッセージ ボックスが表示されます。

An unexpected error occurred in a script running on this page.
onPageInit(pageInit)
scriptname

JS_EXCEPTION
TypeError 'MutationObserver' is undefined

私は何か間違ったことをしていますか？追加情報: ページは netsuite ページであり、jQuery 1.7.2 を実行しています (重要な場合)

4

2 に答える 2

20

IE10+ (および をまだサポートしていない他のブラウザー) で DOM 挿入を検出する必要がある場合は、ノードの外観に影響を与えないプロパティをアニメーション化する CSS アニメーションのイベントをMutationObserverリッスンすることに基づいたトリックを使用できます。animationstart

この手法は Daniel Buchner によって発見されました。David Walsh によるこの投稿で説明されていることがわかります。

動作させるために必要なコードは次のようになります。

@keyframes animationName{ 
    from { outline: 1px solid transparent } 
    to { outline: 0px solid transparent } 
}
* { 
    animation-duration: 0.001s; 
    animation-name: animationName;
}

と

document.addEventListener('animationstart', insertionHandler, false);

このトリックがクロスブラウザーで機能するために必要なセットアップは、すべてのプレフィックスとイベント リスナー名を含む非常に複雑です。ハンドラーはすべての新しいノードに対して呼び出され、アニメーション化するプロパティの選択は困難です。

そのため、使いやすいようにライブラリにラップしました: https://github.com/naugtur/insertionQuery

簡単な使用例を次に示します。

insertionQ('selector').every(function(element){
    //callback on every new element
});
于 2014-02-06T10:56:30.950 に答える