1

Chrome拡張機能内に次のコードがあります：

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
    if (mutation.type === "childList") {
       Log.Debug("mutation: Childlist:"+mutation.addedNodes.length);
        forEach.call(mutation.addedNodes, function (addedNode) {
            if (addedNode.classList !== undefined) {
                if (addedNode.classList.contains('nja')) {
                    Log.Debug("DOM PD:"+addedNode.classList);
                    DoFancyStuff(addedNode);
                }
            }
       }
 }});

これは、コンテンツを動的に追加するサイトで発生します。(Google+)。ユーザーが下にスクロールして、いくつかの新しい要素を追加するだけで、すべてが完璧に機能します。

ユーザーがブラウザからしばらく離れてボタンをクリックすると、多くの新しい要素が表示され、MutationObserver はいくつかのノードを見落としているように見えます。デバッグ ウィンドウ内でこの動作を確認できます。(「nja」クラスで追加された div のいくつかはコンソールに書き込まれますが、そうでないものもあります)

したがって、これは一度に追加される div が多すぎない場合にのみ機能するようです。この動作を変更する構成はありますか?

(これは chrome 拡張機能であるため、他のブラウザーではなく chrome のソリューションのみが必要です)

4

2 に答える 2

1

こんにちは皆さん、[contenteditable] 要素のテキストの変更を検出するときに、MutationObserver が非常にくだらないことを発見しました。特に私が使っている Mac OS Safari では。

偶然にも、自分のサイトで void SetInterval を使用すると、MutationObserver が Safari でもほぼ期待どおりに動作することがわかりました。

以下は、実際の例を使用した私のフィドルjsfiddleです。コンソール出力を調べて、SetInterval 期間を変更したときの応答性を確認します。また、 SetInterval 全体をコメントアウトして、オブザーバーがどれほどお粗末になるかを確認してください。

var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var time = new Date();
    console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds());
    console.log(target.innerHTML);
  });
});
observer.observe(target, {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
});
//observer.disconnect(); - to stop observing


setInterval(function() {}, 10);
<div id="something" contenteditable>Something</div>

于 2016-03-03T17:01:52.297 に答える
1

divクラスを持つa が追加される要素の子である場合nja、このミューテーション オブザーバーはそれを認識しません。

たとえば、ミューテーション オブザーバーを含むページで次の操作を行います。

var added = document.createElement('section');
added.innerHTML = '<div class="nja">nested</div>';
document.body.appendChild(added);

オブザーバーはsection要素に対して実行されますが、div.nja.

querySelectorAllたぶん、追加された各要素に対して実行する必要があるだけです。

于 2015-04-13T23:07:13.640 に答える