銀ねこアトリエ
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の設定
によって監視範囲を細かく指定できます。
広告
たった1pxの気遣いでWebサイトは見違える
2019.09.10
# デザイン
# UX/UI
ステージング(add)取り消したい!コミット終わらない…救済 Git コマンドまとめ
2022.06.12
# git
Aceエディター(ace.js)の使い方まとめ!CDN導入から設定オプション・フォーム連携まで解説
2021.03.07
# JavaScript
【2026年最新比較】始めるならどれ?CSSフレームワーク3選(Bootstrap、Tailwind v4、Foundation)の特徴と選び方
2025.02.27
# CSS
Gatsbyブログサイト移行物語~プラグインHelmetでSEO調整~
2020.12.16
# React
待ってました!Chrome88 で aspect-ratioプロパティがついにサポート
2021.02.03
# CSS