問題タブ [mutation-observers]

MutationObserver を使用して、Web ページに追加された画像を探しています。CSSプロパティを介して多くの画像が表示されるbackground-imageため、タグを探すことに加えて、現在/計算されたCSSスタイルをチェックしていimgます。たとえば...

ただし、ノードがミューテーション イベントをトリガーしてから CSS ルールが適用されるまでには遅延があるようbackgroundImageです。これは、コードがデバッグ中 (ブレークポイントでのステップ実行) に機能したが、実行時に機能しなかったときに気付きました。ミューテーションイベントの処理をsetTimeout遅らせることもできますが、遅延がかなり大きく、ページごとに変化する必要があることを確認する必要があります (CSS ルールがいつ適用されることが保証されるかは正確にはわかりません)。考えられる原因は、単に CSS コンテンツのロードまたはインジェクションの遅延である可能性があります。

この機能を実現する最善の方法は何ですか? 私はオンスタイル変更の突然変異の後だと思いますが、これが存在するとは思えません。

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

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

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

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

次のスクリプトは機能しますが、chrome でエラーが発生すると表示されます。
このエラーを解決するにはどうすればよいですか?

Chrome コンソールのエラー メッセージは次のとおりです。

Uncaught NotFoundError: ノードが存在しないコンテキストでノードを参照しようとしました。(匿名関数)

そのため、要素のサイズを手動で変更すると、要素のサイズを監視することが機能しないというバグがChromeにあるようです。MutationObserver

バグが修正されるまで、これを Chrome でも機能させるには、代わりに、またはそれに加えて何を使用すればよいですか? 非推奨のミューテーション イベントを使用する必要がありますか、それとも別のより良い代替手段がありますか?

要素オブジェクトを使用せずにAngularJSでこれをうまく行う方法はありますか?

Element与えられた周囲の sを見つける最もクリーンな方法は何だろうかMutationRecord?

MutationRecord.nextSibling、プロパティが.previousSiblingありますが、テキスト ノードが含まれている可能性があり、通常の要素ノードを取得する必要があります。

実際の例はこちら: http://jsfiddle.net/tomalec/ceku2/

使ってみた

http://jsfiddle.net/tomalec/Q2HFY/2/

ただし、少し危険に見えます。削除されたものにはまったく機能しません。

http://jsfiddle.net/tomalec/Q2HFY/3/

私は、さまざまなブラウザーでまだ準備が整っていない W3C undomanager に似た undomanager を構築しています。DOM への変更を監視しながらコールバックを呼び出す単純なトランザクション呼び出しを実装し、後で変更を元に戻す (またはやり直す) ために使用できる必要な構造を配列に追加します。

簡単な例:

これを使用するには：

observer.disconnect()すぐに呼び出すと、ミューテーション オブザーバーはalert呼び出しに到達しませんが、setTimeout を使用すると正常に動作します。

私は setTimeout 呼び出しに完全に満足しています。唯一の問題は、大きな変更の場合、切断を 800 ミリ秒も遅らせる必要があることです。

DOM の変更が実際に完了する前に切断が発生したかのように見えるため、何も検出されません。

これは、Firefox 25 と Chrome 32 の両方で発生します。

はローカル変数なので、すぐに範囲外になるのではないかと一瞬考えましたobserverが、グローバル変数に変更しても効果はありませんでした。disconnect()DOMに追いつく機会を与えるために、への呼び出しを遅らせる必要があるようです。

これはブラウザのバグですか？disconnect()DOM が再び準備ができたらすぐに呼び出すより良い方法はありますか?

Twitter Web サイトの一部を自動化するための chrome 拡張機能を作成しています。たとえば、ホームページをロードしてからトレンド/検索リンクをクリックすると、jQueryの「準備完了」またはDOMContentLoadedイベントが発生しません。ネットワーク トレースを見ると、次のページの html が ajax 経由で読み込まれていることがわかります。setInterval などで document.location を監視する以外に、これがいつ発生したかを検出したいと思います。

DOMNodeRemoved イベントを見てきましたが、削除されたノードに対して発生し、可能な解決策ですが、ページの変更だけでなく頻繁に発生し、ページが変更されたことを示す明確なインジケーターがないため、不器用です。

• アドレスバーが変更されると、Twitter は pushState で場所を更新すると思います。場所が変わると何かイベントはありますか？または、具体的に pushState で変更するときは?

• ajax 呼び出しは jQuery のモードではないため、jQuery グローバル イベントでそれをフックすることはできません。XMLHttpRequest リクエストを検出することは可能ですか?

ページの変更をキャプチャする良い方法は何ですか?