問題タブ [mutation-observers]

I've seen a lot of different questions similar to this, but all of them generally targeted a specific selector. Please let me know if there is a duplicate somewhere and I've missed it.

Take this scenario:

You want to build a jquery plugin for a wordpress, drupal, or basically any site that uses third party functionality. Since you don't know ahead of time every specific event and selector you will need to target how would you add jquery/javascript functionality to elements that are created dynamically. Plus you don't know how the element is created (callback using ajax/php/etc).

Example:

I recently tried adding select2 or selectize to my entire site. Unfortunately, since I can't determine ahead of time when select elements (from other plugins/modules) will be added, I can't ensure that the select jquery will work on newly created selects.

Select2

This is the normal way but doesn't work on dynamically created or cloned selects:

If I knew all the events that added these selects I could simply do the following:

However, since I don't know all the selectors of dynamic selects ahead of time (since many are added by 3rd party plugins), select2 will not work on new selects. So the above would only work on a per case senerio.

I need to find a way to traverse through the dom tree and recognize when new selects are created.

I tried targeting several events with .on but it didn't work well at all.

I read that the javascript document.getElementsByTagName recognizes changes in the dom and are reflected in the collection. I also looked into querySelectorAll, but not sure exactly how it works.

I also tried messing with the MutationObserver and checking if the .addednodes.length of select tags changed, but I didn't really get anywhere.

UPDATE

After doing some testing I realized that the problem might lie within the select2 plugin itself. Select2 loads dynamic selects but doesnt get the positioning. Chrome eventually throws typeerros : cannot read property 'find' of null, cannot read property 'hasclass' of null.

タイトルが示すように、特定の ID または CSS クラスを持つ要素が DOM に挿入されたときの正確なタイムスタンプを検出したいと考えています (また、削除されたときを検出することもできます)。最も明白な方法は、document.getElementById検索したい要素の ID を指定して呼び出すことにより、ドキュメントを定期的にポーリングすることですが、この方法はあまり正確ではなく、検出したい要素が複数ある場合、パフォーマンスが非常に高くなる可能性があります。

Mutation EventsとMutation Observersを調べましたが、私が理解していることから、要素が挿入または削除されたかどうかを検出するには、リスナーをルート DOM 要素に追加する必要があります。これは、必要に応じてパフォーマンスに大きな影響を与える可能性があります。ページに要素が挿入または削除されるたびに、追加の JS を実行します。

私が気付いていない、より最適化されたソリューションはありますか? また、jQuery であっても、外部の JS ライブラリを使用しない方がよいでしょう。

MutationObserver私は最近、任意の dom 要素の変更を追跡するこの素晴らしい機能に出くわしました。mozilla 開発者ネットワークで示されたコードを使用しましたが、実行できないようです。これは私が使用したコードです（リンク）：

上記のコードは機能しないようです。ただし、同じコードを少し jQuery で変更すると、すべて問題なく動作するように見えます (デモはこちら)。ドキュメントに欠けているものがありますか、それともオブザーバー機能を誤解しているだけですか。

Polymer の ShadowDOM とMutationObserverpolyfill を使用しており、次のことを行う必要があります。

• レイアウトを実行できるように a が挿入されたことを検出しHTMLCanvasElementます (その幅と高さは、DOM ツリーから切り離された場合は不定offsetWidthですoffsetHeight)
• requestAnimationFrame要素が削除されたことを検出して、ループを停止できるようにする

従来、Shadow DOM を使用しない場合、これは次のように機能します。

1. キャンバス要素に取り付けMutationObserverてdocument.body実行するquerySelectorAll
2. layoutNodeたとえば、これらの要素に対して何らかのメソッドを実行します
3. アニメーション ループでdocument.body.contains(node)が返された場合false、ノードは DOM から削除されています。

Shadow DOM を使用する場合、ルートが追加された DOM 内のすべての要素に対してスキャンを実行し (非常に非効率的と思われる)、Shadow DOM の境界を回避することができlayoutNodeますHTMLCanvasElement。

このノードがまだ DOM ツリーにあることをキャンバスのアニメーション ループから確認するにはどうすればよいですか?

DOM ノードが挿入されたことを検出するために使用するより良い API はありますか?

(注: MutationEvents は、Polymer の CustomElements ポリフィルを使用すると利用できません。)

ミューテーションオブザーバーにコールバック関数によるDOMの変更を強制的に無視させる方法はありますか?

今私は持っています：

問題は、 _3rd_party_callbackコールバックが DOM の変更を引き起こすため、停止しないことです。その名の通り、サードパーティの機能であり、変更することはできません (実際には、その DOM 操作が目的です)。

したがって、コールバックで関数が呼び出される前後に、それぞれ切断してオブザーバーを開始します。

動作しているように見えますが、イベントの非同期処理のおかげで、他の変更が行われてそれらを見逃すと、オブザーバーが無効になる可能性があります。

ページ自体とコールバックから変更を分離する方法があるとは考えにくいですが、試してみます。

Tampermonkey を使用して Opera にユーザースクリプトを書き込もうとしています (ViolentMonkey を試しても同じ結果が得られましたが)。このスクリプトは、ルーターの構成ページで実行され、表示される統計に基づいていくつかの値を計算します。

問題は、それが .asp ページであり、frameset(body 要素はありませんが、これが asp にとって正常かどうかはわかりませんが、使用したことはありません) とそのframe中に 3 つの要素しかないことです。いくつかの DOM メソッドを試した後、URL が変更されないため、実際にページ上の内容を検出するためにいくつかの非常に洗練されていないアプローチが必要になりますが、MutationObserverどれがお尻を蹴るかにつまずきましたが、イベントを返すことができないようです。私が何をしようと。

MutationObserver試着すると動作し、google.com正常に報告されます。これまでの私のコードは、この機能のテストにすぎないため、ここMutationObserverからコピー/貼り付けしたもので、次のようになります (わずかに変更されています)。

この正確なコードは、で完全に正常に動作しgoogle.comます。また、@matchオブザーバーをコンソール (ここには示されていません) に記録して、適切な URL と一致することを確認するため、ディレクティブは問題ではありません。

などのターゲットとしてさまざまな要素を試しました（それが問題だった場合）、構成の有無にwindow.frames['framename'].document.bodyかかわらず、ディレクティブに使用してみました。何があっても、コンソールにログインするミューテーションはありません。subtreedocument-start@run-at

この特定のケースに関してオンラインで何も見つけることができなかったので、質問する必要があります.aspページについて混乱する可能性のある特別なものはありますか、それともsとsとMutationObserver関係がありますか?frameframeset

編集 - 非常に皮肉なことに、ルーターのインターフェイス以外で自分のコードをテストできるオンラインの唯一の場所は、The World's Worst Websiteです。framesetjsfiddle や codepen でさえ、 andに我慢できませんframe。

私は、(とりわけ) ページ上の GIF 画像に影響を与える Chrome 拡張機能に取り組んでいます。最初のページの読み込み後に動的に追加された新しい画像に対して機能させるのに苦労しています。これを処理するために、コンテンツ スクリプトに追加したものは次のとおりです。

processGifテスト目的で、関数をconsole.logタグのsrc属性にすぎないように縮小しました。

ほとんどの場合、ページが最初にロードされたときに DOM が最初に構築されるため、うまく機能し、作成されたすべての初期画像を正常にキャッチします。しかし、Google+ のようなページでは、下にスクロールしても MutationObserver は動的に読み込まれた投稿をまったくキャッチしていないようです。テスト目的でKoushik Dutta の公開ページを使用してきました。彼はGIF を投稿するのが大好きです。上記のコードをコンソールに貼り付けて下にスクロールしようとすると、動的に読み込まれた画像が検出されていないことを確認できるはずです。

これらの動的に追加されたimgタグが表示されないのはなぜですか? また、このように動的に追加された画像を処理するにはどうすればよいですか?