銀ねこアトリエ
Home
Blog
ウェブ制作
CMS
SEO対策・デジタルマーケ
海外ノマド生活
キャリアアップ
かみーゆ徒然記
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の設定
によって監視範囲を細かく指定できます。
広告
【2026年最新比較】始めるならどれ?CSSフレームワーク3選(Bootstrap、Tailwind v4、Foundation)の特徴と選び方
2025.02.27
# CSS
Docker で本番環境に忠実な開発環境を作る(nginx、PHP-FPM、MariaDB)
2025.02.20
# Docker
# PHP
# コマンド
Gatsbyブログサイト移行物語~インストールからNetlifyデプロイまで~
2020.11.26
# React
# github
# Netlify
データが多くて移行できない!?SSH接続Tarコマンドを使ったサイト引越し備忘録
2022.05.29
# コマンド
# サーバー引越し
Pandoc × EJS で Word ファイルを HTML ページに変換する
2025.01.16
# Gulp
# npm
# コマンド
python でスクレイピングして検索上位100件をCVS出力
2022.03.10
# Python