銀ねこアトリエ
Home
Blog
ウェブ制作
CMS
SEO対策・デジタルマーケ
海外ノマド生活
キャリアアップ
かみーゆ徒然記
Mind Journey
About Me
かみーゆの本棚
Contact
MENU
海外ノマドブログ
ウェブ制作
JavaScript
MutationObserver でif...
SHARE
Facebook
MutationObserver でiframe内を監視|DOMの変化を検知して処理を実行する方法
公開日:
2023.03.24
メンテナンス日:
2026.03.15
# JavaScript
広告
広告
FAQ
MutationObserverを使うとパフォーマンスに悪影響はありますか?
監視対象(subtree)が広すぎると負荷がかかりますが、
特定の要素や属性に絞って監視
すれば、従来のインターバル(setInterval)による監視よりも圧倒的に効率的で低負荷です。
iframe内の要素がうまく取得できないのですが。
iframe内のコンテンツが
別ドメインの場合、ブラウザのセキュリティ制限(Same-Origin Policy)
によりJavaScriptでの操作や監視はできません。自ドメイン内のコンテンツであることを確認してください。
監視を途中で止めることはできますか?
はい。インスタンスの
disconnect()
メソッドを呼び出すことで、いつでも監視を停止できます。メモリリークを防ぐためにも、不要になったタイミングで停止するのがベストプラクティスです。
どのような変化を具体的に検知できますか?
クラス名の付け替え、テキスト内容の変更、子要素の追加・削除など、DOMに関するあらゆる「変化」を検知可能です。
optionsの設定
によって監視範囲を細かく指定できます。
広告
CSS の shape-outside で特定の形の図形にテキストを回り込ませる
2020.04.01
# CSS
【VS Code】縦一括の「矩形選択・範囲選択」をマスター!便利ショートカット一覧表
2018.06.11
# VS Code
Gatsbyブログサイト移行物語~プラグインHelmetでSEO調整~
2020.12.16
# React
2020年から始める JS 入門1 はじめの一歩・Hello world
2020.01.05
# JavaScript
本当に怖いDNS(ネームサーバー)変更。予想外のトラブルに備えよう!
2020.12.08
# サーバー引越し
# しろたん師匠
Cropper.js 使い方|画像のリサイズ・ダウンロードをJSで実装
2023.12.28
# JavaScript