MutationObserver でiframe内を監視|DOMの変化を検知して処理を実行する方法 のサムネイル
  1. 銀ねこアトリエ
  2. 海外ノマドブログ
  3. ウェブ制作
  4. JavaScript
  5. MutationObserver でif...

MutationObserver でiframe内を監視|DOMの変化を検知して処理を実行する方法

FAQ

MutationObserverを使うとパフォーマンスに悪影響はありますか?
監視対象(subtree)が広すぎると負荷がかかりますが、 特定の要素や属性に絞って監視 すれば、従来のインターバル(setInterval)による監視よりも圧倒的に効率的で低負荷です。
iframe内の要素がうまく取得できないのですが。
iframe内のコンテンツが 別ドメインの場合、ブラウザのセキュリティ制限(Same-Origin Policy) によりJavaScriptでの操作や監視はできません。自ドメイン内のコンテンツであることを確認してください。
監視を途中で止めることはできますか?
はい。インスタンスの disconnect() メソッドを呼び出すことで、いつでも監視を停止できます。メモリリークを防ぐためにも、不要になったタイミングで停止するのがベストプラクティスです。
どのような変化を具体的に検知できますか?
クラス名の付け替え、テキスト内容の変更、子要素の追加・削除など、DOMに関するあらゆる「変化」を検知可能です。optionsの設定によって監視範囲を細かく指定できます。