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
- Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
- メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
- webpack+Reactの環境にTailwindCSSを導入してみる
webpack+Reactの環境にTailwindCSSを導入してみる
- Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
- Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
- Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
- Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
categories