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

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

element.contentDocumentオブジェクトはIE7以下、Safari9以下には対応していません。
代わりにelement.contentWindowからdocumentオブジェクトを取得します。

  • ※ frameまたはiframe要素で読み込まれているページが別ドメインである場合、クロスドメインの制約に引っかかり取得できない場合がありますのでご注意ください。

構文

var frameDocument = element.contentDocument;

IE7以下/Safari9以下

var frameDocument = element.contentWindow.document;

戻り値

取得したdocumentオブジェクトを返します。

サンプルコード

次のサンプルコードはiframeで読み込んでいるHTMLからp要素を取得する例です。

JavaScript

// iframe要素を取得
var iframeElem = document.getElementsByTagName('iframe');

// iframeで読み込まれているページからdocumentオブジェクトを取得
var iframeDocument = iframeElem[0].contentDocument || iframeElem[0].contentWindow.document;

// iframeで読み込まれているページからp要素を取得
var pElem = iframeDocument.getElementsByTagName('p')[0];

// p要素のHTMLをアラートで表示
alert(pElem.outerHTML);

JavaScript逆引きリファレンス一覧へ戻る