JavaScript プログラミング講座


インラインフレームについて（HTMLIFrameElement）



・インラインフレームについて
・インラインフレームを作成する
・フレーム内にコンテンツを作成する
・フレーム内にコンテンツを読み込む
・フレーム内のコンテンツと相互アクセスする
・サンドボックス制限について（HTML5世代）
・インラインフレームのプロパティについて

前のページに戻る

　

インラインフレームについて

　


■インラインフレームについて


<IFRAME> タグを使用すると、インラインフレームを表示することができます。
　
インラインフレーム内には、任意のコンテンツを表示する事ができます。
　
<IFRAME> タグを使用してインラインフレームを設置する

<html>
  <body>

    <iframe src="http://example.com/" width="500" height="300" ></iframe>

  </body>
</html>
　
サンプル表示
　

■ HTMLIFrameElement インターフェースについて

　
HTMLIFrameElement インターフェースは、<IFRAME> タグに相当します。
　
エレメントの一種です。
　
このページでは、HTMLIFrameElement インターフェースで供給される機能について解説しています。
　
■ HTMLIFrameElement インターフェースの派生について

HTMLIFrameElement インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLIFrameElement
　

上に戻る

　

インラインフレームを作成する

　
インラインフレームを作成する
インラインフレームを表示する
インラインフレームを取得する
フレームリストを取得する
　


■インラインフレームを作成する

　
■ HTMLIFrameElement オブジェクトを作成する
　
document.createElement() メソッドを使用します。
　
引数に、"iframe" を指定します。
　
動的に HTMLIFrameElement オブジェクトを作成する

// HTMLIFrameElement オブジェクトを作成する
var iframe = document.createElement("iframe");

// 出力テスト
console.log(iframe);
　

■インラインフレームをブラウザに表示する

　
HTMLIFrameElement オブジェクトを、任意のノードリストに登録します。
　
インラインフレームを動的に作成して、ノードリストに登録する

// HTMLIFrameElement オブジェクトを作成する
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);
　

■HTMLIFrameElement オブジェクトを取得する

　
■静的な <IFRAME> タグから取得する
　
任意のエレメントを取得する方法は、こちらで解説しています。
　
静的な <IFRAME> タグから、HTMLIFrameElement オブジェクトを取得する

<html>
  <body>

    <iframe id="aaa" src="http://example.com/" width="500" height="300" ></iframe>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var iframe = document.getElementById("aaa");

	// 出力テスト
	console.log(iframe);

    //-->
    </script>

  </body>
</html>
　

■フレームリストを取得する

　
■ window.frames プロパティから取得する
　
フレームとは、<FRAME> <IFRAME> 要素などが該当します。
　
フレームリストを取得するには、window.frames プロパティを使用します。
　
フレームの総数を取得するには、length プロパティを使用します。
　
フレームリストは、配列のように中身を取り出せます。
　
中には、フレーム内の Window オブジェクトが格納されています。
　
親のフレーム要素を取得するには、frameElement プロパティを使用します。
　
フレーム内の Window オブジェクトをまとめて取得する(window.frames プロパティを使用)

<html>
  <body>

    <iframe style="width: 400px; height: 400px;"></iframe>
    <iframe style="width: 400px; height: 400px;"></iframe>
    <iframe style="width: 400px; height: 400px;"></iframe>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// フレームのリストを取得する
	// ------------------------------------------------------------
	var frame_list = window.frames;

	// ------------------------------------------------------------
	// フレームの総数を取得する
	// ------------------------------------------------------------
	var num = frame_list.length;

	var i;
	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// フレーム内の Window オブジェクトを取得する
		// ------------------------------------------------------------
		var iframe_window =  frame_list[i];

		// ------------------------------------------------------------
		// 親のフレーム要素を取得する
		// ------------------------------------------------------------
		var iframe = iframe_window.frameElement;

		// ------------------------------------------------------------
		// 出力テスト
		// ------------------------------------------------------------
		console.log("id:" + i);
		console.log(iframe_window);
		console.log(iframe);

	}

    //-->
    </script>

  </body>
</html>
　
■ Window オブジェクトから直接取得する
　
Window オブジェクトに対して、数値で読み取りアクセスします。
　
Window オブジェクトは、配列のように中身を取り出せます。
　
window.frames プロパティの中身は、自身の Window オブジェクトです。
　
フレーム内の Window オブジェクトをまとめて取得する(window オブジェクトを使用)

<html>
  <body>

    <iframe style="width: 400px; height: 400px;"></iframe>
    <iframe style="width: 400px; height: 400px;"></iframe>
    <iframe style="width: 400px; height: 400px;"></iframe>

    <script type="text/javascript">
    <!--

	// フレームの総数を取得する
	var num = window.length;

	var i;
	for(i=0;i < num;i++){

		// フレーム内の Window オブジェクトを取得する
		var iframe_window = window[i];

		// 出力テスト
		console.log("id:" + i);
		console.log(iframe_window);
	}

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

フレーム内にコンテンツを作成する

　
ドキュメントに HTML 文字列を出力する
DOM API を使用する
srcdoc プロパティを使用する（HTML5 世代）
　


■ ドキュメントに HTML 文字列を出力する


まず Document オブジェクトを取得します。
　
Document オブジェクトを取得する方法については、こちらで解説しています。
　
open()、write()、close() メソッドを使って、ドキュメントに HTML 文字列を出力します。
　
フレーム内にコンテンツを作成する（write() メソッドを使用）

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Document オブジェクトを取得
// ------------------------------------------------------------
var iframe_document = iframe.contentWindow.document;

// ------------------------------------------------------------
// ドキュメントオブジェクトに HTML 文書を出力する
// ------------------------------------------------------------
// ドキュメントを開く
iframe_document.open();

// HTML 文字列を出力
iframe_document.write('<HTML>');
iframe_document.write('  <HEAD></HEAD>');
iframe_document.write('  <BODY>');
iframe_document.write('    <SPAN>出力テスト</SPAN>');
iframe_document.write('  </BODY>');
iframe_document.write('</HTML>');

// ドキュメントを閉じる
iframe_document.close();
　

■ DOM API を使用する


まず Document オブジェクトを取得します。
　
Document オブジェクトを取得する方法については、こちらで解説しています。
　
DOM API を使って、DOM ツリーを構築します。
　
DOM API については、こちらで解説しています。
　
フレーム内にコンテンツを作成する（DOM API を使用）

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Document オブジェクトを取得
// ------------------------------------------------------------
var iframe_document = iframe.contentWindow.document;

// ------------------------------------------------------------
// DOM ツリーを初期化する
// ------------------------------------------------------------
iframe_document.open();
iframe_document.write("<html><head></head><body></body></html>");
iframe_document.close();

// ------------------------------------------------------------
// ドキュメント内に、動的にエレメントを追加する
// ------------------------------------------------------------
// エレメントを作成する
var element = iframe_document.createElement("div");

// スタイルを設定する
element.style.cssText = "position:absolute; left:20px; top:10px; width:400px; height:400px; background:#fcc; border:10px #844 solid;";

// BODY のノードリストに登録する
iframe_document.body.appendChild(element);

// ------------------------------------------------------------
// ドキュメント内に、動的にテキストノードを追加する
// ------------------------------------------------------------
// テキストノードを作成する
var text_node = iframe_document.createTextNode("表示テスト");

// エレメントのノードリストに、テキストノードを登録する
element.appendChild(text_node);
　

■ srcdoc プロパティを使用する（HTML5 世代）

　
■ HTML 文字列をセットして、DOM ツリーを構築する
　
srcdoc プロパティを使用します。
　
Internet Explorer 11 の時点では、対応していません。
　
■使用例
　
フレーム内にコンテンツを作成する（srcdoc プロパティを使用）

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Document オブジェクトを取得
// ------------------------------------------------------------
var iframe_document = iframe.contentWindow.document;

// ------------------------------------------------------------
// HTML 文字列を用意する
// ------------------------------------------------------------
var text_html = 
'<HTML>' +
'  <HEAD></HEAD>' +
'  <BODY>' +
'    <SPAN>出力テスト</SPAN>' +
'  </BODY>' +
'</HTML>';

// ------------------------------------------------------------
// HTML 文字列をセットして、DOM ツリーを構築する
// ------------------------------------------------------------
iframe.srcdoc = text_html;
　

上に戻る

　

フレーム内にコンテンツを読み込む

　
フレーム内にコンテンツを読み込む
混在コンテンツ（Mixed Content）について
X-Frame-Options ヘッダについて
　


■フレーム内にコンテンツを読み込む

　
■ URL アドレスを指定する
　
src プロパティを使用します。
　
コンテンツの URL アドレスを、文字列で指定します。
　
src プロパティに書き込みアクセスを行うと、コンテンツの読み込みを開始します。
　
一部のブラウザでは、Data URI Scheme や Blob URL Scheme を指定する事もできます。
　
安定して動作しないため、こちらの方法でコンテンツを作成した方がいいでしょう。
　
フレーム内にコンテンツを読み込む

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// フレーム内にコンテンツを読み込む
// ------------------------------------------------------------
// "http://example.com/" を開く
iframe.src = "http://example.com/";
　
■フレーム（ウィンドウ）に名前を指定する
　
name プロパティを使用します。
　
「ハイパーリンクのターゲット名」と「インラインフレーム名」が一致する場合、インラインフレーム内が遷移します。
　
ターゲット名を指定して、コンテンツを読み込む

<html>
  <body>

    <iframe src="" name="my_iframe" width="500" height="300" ></iframe><br>

    <a href="http://example.com/" target="my_iframe">リンク！！</a>

  </body>
</html>
　

■混在コンテンツ（Mixed Content）について

　
インラインフレームは、別の生成元（オリジン）に存在するページでも、自由に開く事ができます。
　
ただし、「セキュアなページ（https）」内で、<IFRAME> 要素を使用する場合、セキュリティ上の制限があります。
　
「セキュアなページ（https）」から、「アンセキュアなページ（http）」を開く事はできません。
　
このような状態を、混在コンテンツ（Mixed Content）といいます。
　
「セキュアなページ（https）」から「セキュアなページ（https）」を開く事は可能です。
　
この場合、別のオリジンに存在するページでも、自由に開く事ができます。
　

■ X-Frame-Options ヘッダについて

　
X-Frame-Options ヘッダを使用すると、外部サイトのインラインフレーム内に、自身のサイトが埋め込まれるのを阻止する事ができます。
　
パスワードや住所などの、個人情報を入力するコンテンツであれば、必ず指定した方がいいでしょう。
　
レスポンスヘッダに、『 X-Frame-Options 』と、以下の文字列を追加します。
　
指定する文字列説明
DENYインラインフレーム内での動作を禁止する。
SAMEORIGINオリジンが一致している場合のみ、インラインフレーム内での動作を許可する。
ALLOW-FROM origin指定したオリジンと一致している場合のみ、インラインフレーム内での動作を許可する。
　
■ .htaccess でヘッダを追加する例
　
インラインフレーム内での動作を禁止する。

Header set X-Frame-Options DENY
　
オリジンが一致している場合のみ、インラインフレーム内での動作を許可する。

Header set X-Frame-Options SAMEORIGIN
　
指定したオリジンと一致している場合のみ、インラインフレーム内での動作を許可する。

Header set X-Frame-Options "ALLOW-FROM http://sub.example.com/"
　

上に戻る

　

フレーム内のコンテンツと相互アクセスする

　
インラインフレーム内の Window オブジェクトを取得する
インラインフレーム内の Document オブジェクトを取得する
インラインフレーム内から、親のインラインフレーム要素を取得する
　


■インラインフレーム内の Window オブジェクトを取得する

　
contentWindow プロパティを使用します。
　
■セキュリティについて
　
インラインフレームが、任意のノードリストに登録されていない場合、取得に失敗します。
　
Window オブジェクトは、基本的に取得可能です。
　
ここから Document オブジェクトなどにアクセスを試みると、セキュリティエラーが発生し、失敗する事があります。
　
■取得例
　
インラインフレーム内の Window オブジェクトを取得する

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Window オブジェクトを取得
// ------------------------------------------------------------
var iframe_window = iframe.contentWindow;

// 出力テスト
console.log(iframe_window);
　

■インラインフレーム内の Document オブジェクトを取得する

　
contentDocument プロパティを使用します。
　
■Internet Explorer 7 以前の場合
　
contentDocument プロパティに対応していません。
　
かわりに、contentWindow プロパティを使用します。
　
インラインフレームから Document オブジェクトを取得する関数

// --------------------------------------------------------------------------------
// インラインフレームから Document オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function IFrameGetContentDocument(iframe){
	try{
		return iframe.contentDocument || iframe.contentWindow.document;
	}catch(e){
	}
	return null;
}
　
■セキュリティについて
　
Document オブジェクトは、必ずしも取得できるとは限りません。
　
インラインフレームが、任意のノードリストに登録されていない場合、取得に失敗します。
　
親ウィンドウと、自身のフレームの生成元（オリジン）が一致していない場合、取得に失敗します。
　
サンドボックス制限がある場合、取得に失敗します。
　
■取得例
　
インラインフレーム内の Document オブジェクトを取得する

// --------------------------------------------------------------------------------
// インラインフレームから Document オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function IFrameGetContentDocument(iframe){
	try{
		return iframe.contentDocument || iframe.contentWindow.document;
	}catch(e){
	}
	return null;
}

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Document オブジェクトを取得
// ------------------------------------------------------------
var iframe_document = IFrameGetContentDocument(iframe);

// 出力テスト
console.log(iframe_document);
　

■インラインフレーム内から、親のインラインフレーム要素を取得する

　
window.frameElement プロパティを使用します。
　
親のウィンドウを取得する方法については、こちらで解説しています。
　
■セキュリティについて
　
親ウィンドウと、自身のフレームの生成元（オリジン）が一致していない場合、取得に失敗します。
　
サンドボックス制限がある場合、取得に失敗します。
　
■取得例
　
自身の Window オブジェクトから、親となるインラインフレーム要素を取得する（インラインフレーム内で動作している場合）

// 親となるインラインフレーム要素を取得する
var iframe_parent = window.frameElement;

// 出力テスト
console.log(iframe_parent);
　
インラインフレームが一致するか調べる

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// ------------------------------------------------------------
// Window オブジェクトを取得
// ------------------------------------------------------------
var iframe_window = iframe.contentWindow;

// ------------------------------------------------------------
// 親となるインラインフレーム要素を取得する
// ------------------------------------------------------------
var iframe_parent = iframe_window.frameElement;

// 出力テスト
console.log(iframe === iframe_parent); // true
　

上に戻る

　

サンドボックス制限について（HTML5世代）

　


■サンドボックス制限について

　
インラインフレームに、サンドボックス制限を発生させるには、sandbox プロパティを使用します。
　
sandbox プロパティの設定は、任意のノードリストに登録するよりも前に済ませる必要があります。
　
何もしなかった場合、サンドボックス制限は発生しません。
　
sandbox プロパティに、任意の文字列を書き込んだ時点で、すべてのサンドボックス制限が発生します。
　
sandbox プロパティには、解除したい以下の文字列を記述します。
　
空白で区切って、複数の許可を設定する事もできます。
　
指定する文字列説明
allow-same-origin省略した場合、オリジンが一致していたとしても、オリジンが一致しないときと同様の制限を必ず発生させる事ができます。
allow-top-navigationインラインフレーム内から、トップウィンドウに対して、ナビゲーション系の操作を許可します。
allow-popupsインラインフレーム内から、新規にウィンドウの生成を許可します。
allow-formsインラインフレーム内で、フォームの動作を許可します。
allow-scriptsインラインフレーム内で、スクリプトの実行を許可します。
　
■動作例
　
スクリプトの実行を許可する

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// ------------------------------------------------------------
// Data URI Scheme をセットして、DOM ツリーを構築する
// ------------------------------------------------------------
iframe.src = 'data:text/html;charset=UTF-8,' + encodeURIComponent(
'<HTML>' +
'  <HEAD></HEAD>' +
'  <BODY>' +
'    <SCRIPT>alert("実行テスト！！");</SCRIPT>' +
'  </BODY>' +
'</HTML>');

// ------------------------------------------------------------
// サンドボックス制限を設定する
// ------------------------------------------------------------
iframe.sandbox = "allow-scripts";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(iframe);
　
トップウィンドウのナビゲーション操作を許可する

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// ------------------------------------------------------------
// Data URI Scheme をセットして、DOM ツリーを構築する
// ------------------------------------------------------------
iframe.src = 'data:text/html;charset=UTF-8,' + encodeURIComponent(
'<HTML>' +
'  <HEAD></HEAD>' +
'  <BODY>' +
'    <A target="_top" href="http://example.com/">リンク！！</A>' +
'  </BODY>' +
'</HTML>');

// ------------------------------------------------------------
// サンドボックス制限を設定する
// ------------------------------------------------------------
iframe.sandbox = "allow-top-navigation";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(iframe);
　
新規ウィンドウ作成を許可する

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// ------------------------------------------------------------
// Data URI Scheme をセットして、DOM ツリーを構築する
// ------------------------------------------------------------
iframe.src = 'data:text/html;charset=UTF-8,' + encodeURIComponent(
'<HTML>' +
'  <HEAD></HEAD>' +
'  <BODY>' +
'    <A target="_blank" href="http://example.com/" >リンク！！</A>' +
'  </BODY>' +
'</HTML>');

// ------------------------------------------------------------
// サンドボックス制限を設定する
// ------------------------------------------------------------
iframe.sandbox = "allow-popups";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(iframe);
　
ドキュメントへのアクセスと、フォームの動作を許可する

// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
// ------------------------------------------------------------
var iframe = document.createElement("iframe");

// ------------------------------------------------------------
// Data URI Scheme をセットして、DOM ツリーを構築する
// ------------------------------------------------------------
iframe.src = 'data:text/html;charset=UTF-8,' + encodeURIComponent(
'<HTML>' +
'  <HEAD></HEAD>' +
'  <BODY>' +
'    <FORM action="http://example.com/" method="GET" >' +
'      <INPUT type="submit" value="送信！！">' +
'    </FORM>' +
'  </BODY>' +
'</HTML>');

// ------------------------------------------------------------
// サンドボックス制限を設定する
// ------------------------------------------------------------
iframe.sandbox = "allow-same-origin allow-forms";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(iframe);

// ------------------------------------------------------------
// インフレーム内のドキュメントの取得を試みる
// ------------------------------------------------------------
// 出力テスト
console.log(iframe.contentWindow.document);
　

上に戻る

　

インラインフレームのプロパティについて

　


■インラインフレームのプロパティ一覧

　
HTMLIFrameElement インターフェースで利用可能な、プロパティの一覧です。（一部抜粋）
　
■ HTMLImageElement インターフェース
　
プロパティ名型説明
srcStringコンテンツの URL アドレスを、文字列で指定する。
nameStringフレーム（ウィンドウ）の名前を設定する。
contentWindowWindowインラインフレーム内の Window オブジェクトを取得する。
contentDocumentDocumentインラインフレーム内の Document オブジェクトを取得する。
　
プロパティ名型説明
widthStringHTML4 の width 属性と同等。
heightStringHTML4 の height 属性と同等。
marginWidthStringHTML4 の marginwidth 属性と同等。
marginHeightStringHTML4 の marginheight 属性と同等。
alignStringHTML4 の align 属性と同等。
frameBorderStringHTML4 の frameborder 属性と同等。
scrollingStringHTML4 の scrolling 属性と同等。
longDescStringHTML4 の longdesc 属性と同等。
　
■HTML5 世代の機能
　
プロパティ名型説明
srcdocStringHTML 文字列を指定して、フレーム内にコンテンツを構築する。
allowFullscreenBooleanフレーム内のコンテンツから、フルスクリーン実行を許可する場合、true を指定する。
sandboxStringHTML5 の sandbox 属性と同等。
　

上に戻る

　
前のページに戻る