iframe内のDOM要素を取得する(JavaScript)

2021年11月30日

iframeを使うのは時代遅れといわれていますが,ちょっと試してみたいことがあり挑戦しています。

しかし,iframe以下のDOM要素が取得できない。

  const Frame = document.getElementById(対象のiFrameのID名);
  console.log(Frame);

例えば,上のようにコーディングすると,下のように出力されます。

ちゃんと取得できています。

iframe以下のdocument要素が取得できない

ここからが問題です。

色々なサイトを見るところ取得できる様子。

例えば,次のページです。

JavaScriptでiframe内のDOM要素を取得したり操作する

frameまたはiframe要素内のdocumentオブジェクトを取得

iframe 以下を取得するには,次のようにコーディングするらしいです。

iframe内の要素については「ELEMENT.contentWindow.document.querySelector(‘SELECTER’)」で取得することができます。

https://designsupply-web.com/media/programming/4823/

これが自サイトでは動かない。

例えば,次のコーディングの場合。

const FrameContent = Frame.contentWindow.document;
console.log(FrameContent);

下のように出力されます。

何もない。

よって,そこから要素を取得する関数を動かしても null が返ってきます。

undefined でないのがさらに厄介。

contentWindowが効かない

contentWindow  プロパティは、<iframe> 要素 の Window オブジェクトを返します。この Window オブジェクトを使用して iframe のドキュメントとその内部 DOM にアクセスできます。この属性は読み取り専用ですが、そのプロパティはグローバルな Window オブジェクトのように操作できます。

HTMLIFrameElement.contentWindow

ここですね。

DOM の HTMLIFrameElement オブジェクトでは、スクリプトはフレーム化されたリソースの window オブジェクトに contentWindow プロパティを使ってアクセスすることができます。 contentDocument (en-US) プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。

<iframe>: インラインフレーム要素

やはり,「contentWindow」プロパティで,下の要素が取得できるらしい。

動的に iframe を追加していることが原因?

動的に作られたiframe内の要素の取得方法

しかし上のページを見る限り,取得できる様子。

iframe要素内のdocumentオブジェクトを取得するには、element.contentDocumentを使用します。

iframe内のイベントを親ページのスクリプトで処理するのはちょっと特殊な動作になるので、解説しているサイトを参考に方針を決めてください。

https://s8a.jp/javascript-event-iframe

https://webplus8.com/javascript-iframe-parent-child/

また、iframeを使わないで済むならそちらをお勧めします。

https://teratail.com/questions/311363

こちらも contentWindow で取得できると書いています。

うーん,ちょっと原因が分からないですね。

ここは,iframe 使わずに,このアンサーの人も書いているように,div 要素に逃げることにします。


投稿に関連する記事抜粋

投稿記事のカテゴリやタグと同じ記事をランダム表示します。

 カテゴリ一覧

 雑談(170)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(33)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)