銀ねこアトリエ
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の設定
によって監視範囲を細かく指定できます。
広告
Gatsbyブログサイト移行物語~CSSコンポーネントでオリジナルページを作ろう!!~
2020.12.19
# React
【npm-script】imagemin-cliを使って画像圧縮する方法【v8対応】
2020.12.25
# JavaScript
# npm
margin block / margin inlineとは?CSSの上下左右を置き換える手順
2021.01.28
# CSS
スプシのデータをJSON化してウェブサイトに取り込む(Sheets API使いません)
2021.04.14
# PHP
# JSON
# WordPress
待ってました!Chrome88 で aspect-ratioプロパティがついにサポート
2021.02.03
# CSS
本当に怖いDNS(ネームサーバー)変更。予想外のトラブルに備えよう!
2020.12.08
# サーバー引越し
# しろたん師匠