4

コンテンツが Web ページに追加されたときにアクションをトリガーする必要があります。更新はさまざまな性質 (AJAX、遅延スクリプト、ユーザー アクションなど) である可能性があり、私の管理下にはありません。

DOM ミューテーション イベントを使用したかったのですが、すべてのブラウザーで使用できるわけではありません。フォールバック プランを提供するクロスブラウザ ライブラリはありますか?

また、Internet Explorer 9 がこれらの DOM ミューテーション イベントをサポートするかどうかも知りたいです。

ありがとう！

4

4 に答える 4

1

これを行うには2つの方法があります...

1 つ目は、dom のスナップショットを取り ( var snap = document.body)、それを 100 ミリ秒後に dom と比較してsnapから、本体に再度リセットすることです。それらを比較する方法については、創造力を働かせてみましょう。反復が一般的な答えのようです。それはきれいではありません。

もう 1 つのオプションは、アプリケーションで要素を追加/削除する作成する関数に特別な関数を含めることです。この関数は、追加 (または破棄) した要素だけを繰り返し処理し、一致するものを探します。

/* Shim matchesSelector */
if (!Element.prototype.matchesSelector) {
    Element.prototype.matchesSelector =
    Element.prototype.matches ||
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector;
}

function addingToDom(elm){

    /* Whichever method you want to use to map selectors to functions */
    var callbacks = array(['.class', fn-reference1], ['#id', fn-reference2], ['div', fn-reference3]);

    /* go through all the elements you're adding */
    for (var i = 0; i<elm.length; ++i){
        /* go through all the selectors you're matching against */
        for (var k = 0; k<callbacks.length ++k){
            if(elm[i].matchesSelector(callbacks[k][0])){
                /* call function with element passed as parameter */
                callbacks[k][1](elm[i]);
            }
        }
    }
}

それは完璧ではないかもしれませんが、どこに向かうべきかのアイデアを与えるはずです. 追加した要素を引数として渡して、この関数 (addingToDom) を呼び出します。要素を削除するための同様の関数を作成します (または同じ関数ですが、コールバックの別の配列を調整します)。

これは、いくつかのアイデアをテストするために使用している現在の (大きくて乱雑な) コードの外挿です。このシムを使用して ie7 までさかのぼってマッチセレクターをテストしましたが、うまく機能しているようです。

私は、要素が追加されたときに呼び出され、それ自体をパラメーターとして渡す関数として設定できる何らかのパラメーターを持つ可能性を検討しましたが、調べていません。しかし、それはおそらく大げさです。

于 2012-10-31T14:04:59.917 に答える
0

私はちょうどcssイベントに依存する興味深いハックに出くわしました：

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

著者によると、これはIE10、Firefox 5以降、Chrome 3以降、Opera 12、Android 2.0以降、Safari 4以降、およびiPhoneSafariの場合はほぼすべてのバージョンで機能します。

于 2012-11-21T19:00:22.650 に答える
0

関数を設定し、JSONP for AJAX リクエストを使用してその関数を呼び出すことで、アクションを簡単にトリガーできます。ユーザーアクション中に同じ関数を呼び出すことができます。

于 2012-04-24T19:42:01.210 に答える
0

さて...要素が追加されたかどうかを判断するアイデアは次のとおりです。ページ上の各要素にクラスを追加し、クエリを使用してそのクラスを持たない各要素を見つけ、querySelectorAll(':not(.myclass)')それらをループします。

それでも間隔を置いて実行する必要がありますが、querySelectorAll はネイティブ ブラウザーなので高速であり、「空」が返された場合 ( false? null? 頭の中でわかりません)、何もしません。そのようにオーバーヘッドを最小限に抑える必要があります。

于 2012-10-31T15:28:45.543 に答える