JavaScriptでiframe内のDOM要素を取得したり操作する
最終更新日: Update!!
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってiframeのDOM要素にアクセスしていきます。
まずはiframeを呼び出すベースのHTMLを見ていきます。今回はiframe外の要素にイベントを設定し、iframe内の要素を操作する例で進めていきます。トリガーとなる要素と、iframeの要素を用意します。
【HTML】※一部抜粋
今回のサンプルはこちらに用意してみましたので、よかったらご参考に。ちなみにiframe自体のHTMLと呼び出す側のHTMLでドメインが異なる場合は、そのままですと同一生成元ポリシー(Same Origin Policy)で警告が出るので、CORS(Cross-Origin Resource Sharing)の制御が必要になります。
<body> <button id="trigger">クリックでiframe内の要素が変化します</button> <iframe src="20190515-iframe.html" id="elem"></iframe> </body>そして、iframeとして表示するHTMLです。特に変わったところはないですが、変化をわかりやすくするため要素を入れておきます。 【HTML(iframe)】※一部抜粋
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>iframeで表示させるHTML</title> <style> #target { background: blue; } </style> </head> <body> <div id="target">iframe内にある要素です </div> </body> </html>最後にiframeのDOM要素にアクセスするためのjavascriptを記述していきます。iframe内の要素については「ELEMENT.contentWindow.document.querySelector('SELECTER')」で取得することができます。 【javascript】
const btn = document.getElementById('trigger'); const elem = document.getElementById('elem'); const target = elem.contentWindow.document.querySelector('#target'); // iframeのDOMを取得 console.log(elem.contentWindow.document); // iframe内のDOMを操作 btn.addEventListener('click', function(){ target.innerHTML = 'iframeの外のボタンが<br>クリックされました!!'; target.style.background="red"; });DOMを取得するにはそのまま「.contentWindow.document」でOKです。console.logを確認すると出力されているのがわかりますね。

sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories