HTML <iframe>タグの使い方：インラインフレームを作成する要素

取り扱い	標準仕様
カテゴリー	フロー・コンテンツフレージング・コンテンツエンベッデッド・コンテンツインタラクティブ・コンテンツパルパブル・コンテンツ
親にできる要素	エンベッデッド・コンテンツを受け入れる要素
子にできる要素	なし
対応ブラウザ	caniuseで確認

<iframe>タグの解説

<iframe>は、閲覧中のページに別のページを表示させる埋込式の窓を作成します。<iframe>の「i」はインラインの略です。そのため、この要素が生成する窓を「インラインフレーム」と呼びます。

通常、ブラウザはひとつのウィンドウにひとつのページを表示しますが、その画面をくり抜いて擬似的な窓を設置し、別のページを見せることができます。これは二つの画面を一度に描画することになるので、コンピューターの処理に負荷がかかることに注意しましょう。

<iframe>の中には、HTTPでリクエスト可能なウェブサイトや自身が管理するサーバーに置かれた別のファイルを表示できます。また、srcdoc属性を使ってHTMLの内容を直接記述することも可能です。

この要素の開始タグと終了タグの間には何も書かなくても問題ありませんが、代用テキストを用意しておくと対応していない環境で閲覧者にメッセージを表示できます。

<iframe>タグの特徴

レイアウトの初期値はインラインです。文章の改行には影響を与えません。
視覚的な効果として、画面の中に指定された範囲の擬似的な窓を用意します。
同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<iframe>要素に指定できる属性

src: インラインフレームの内側に表示するファイルを指定します。同一オリジンポリシーに従う空白ページを埋め込む場合は、"about:blank"の値を使用して下さい。
srcdoc: インラインフレームの内側に表示する内容をHTMLで直接指定します。この属性がある場合、src属性は上書きされます。ブラウザがこの属性に対応していない場合、src属性のURLが読み込まれます。この属性の値に二重引用符を使用する場合、エスケープ処理が必要となる点に注意して下さい。
name: インラインフレームの名前を指定します。リンクやフォームのtarget属性、JavaScriptの引数として使用できます。
width: インラインフレームの幅を単位なしのピクセル整数値で表します。既定値は300です。この寸法はCSSで上書きできます。
height: インラインフレームの高さを単位なしのピクセル整数値で表します。既定値は150です。この寸法はCSSで上書きできます。
allow: インラインフレームが使用する機能ポリシーを指定します。この属性にFeature Policy仕様に基づく値を設定すると、ユーザエージェントにおける特定の機能やAPIを有効化、あるいは無効化したり、動作を変更することができます。

autoplay：フレームに埋め込まれた動画を自動的に再生します。

encrypted-media：Encrypted Media Extensions APIの使用を許可します。

fullscreen：fullscreen APIの使用を許可します。

geolocation：Geolocation APIの使用を許可します。

payment：Payment Request API の使用を許可します。

picture-in-picture：ピクチャ・イン・ピクチャのモードでビデオを再生可能にします。
sandbox: インラインフレームの内側に表示されるコンテンツに追加の制約を適用します。この属性の値を空にすると、全ての制約を適用します。特定の制約を外す場合は、個別の値を空白区切りで設定します。

allow-downloads：ユーザーの操作により発生するダウンロードを許可します。

allow-downloads-without-user-activation：ユーザーの操作なしで発生するダウンロードを許可します。

allow-forms：フォームによる送信を許可します。この値が指定されていない場合は、送信をブロックします。

allow-modals：モーダルウィンドウの展開を許可します。

allow-orientation-lock：スクリーンの方向をロックすることを可能にします。

allow-pointer-lock：Pointer Lock APIを使用できるようにします。

allow-popups：ポップアップ（window.open(), target="_blank", showModalDialog()など）を許可します。この値が指定されていない場合は、これらの機能を無効にします。

allow-popups-to-escape-sandbox：サンドボックス化されたドキュメントから、サンドボックスを継承していないウィンドウの展開を許可します。

allow-presentation：プレゼンテーション・セッション（Presentation session）の開始を許可します。

allow-same-origin：同一のオリジンポリシーとして扱います。この値が指定されなかった場合、リソースは同一オリジンポリシーに失敗します。

allow-scripts：スクリプトの実行を許可します。ただし、ポップアップウィンドウは作成できません。

allow-storage-access-by-user-activation：Storage Access APIで親のストレージ容量へアクセスを要求することを許可します。

allow-top-navigation：最上位の閲覧コンテキスト（_top）に移動できるようにします。

allow-top-navigation-by-user-activation：ユーザーが操作した場合に限り、最上位の閲覧コンテキスト（_top）に移動できるようにします。
グローバル属性: 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ: 全てのHTML要素に指定できるコンテンツ属性です。

<iframe>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。<iframe>の内部には新しい閲覧コンテキストが生成されます。これは元のウィンドウやタブが持つコンテキストに入れ子で配置されたものとなります。読み込んだ内容がフレームの寸法よりも大きい場合、内側がスクロールできるようになります。


<iframe src="https://example.org" width="300" height="300"></iframe>

CSSでインラインフレームの寸法や見た目を調整する

インラインフレームの幅や高さを指定する場合は、スタイルシートで上書きします。共通のスタイルで以下のような指定を行っておくと管理がしやすくなります。


/* 物理的な寸法指定 */
iframe {
	width: 100%;
	height: auto;
	/* 任意の最大値 */
	max-width: 500px;
	max-height: 300px;
}
/* 論理的な寸法指定 */
iframe {
	inline-size: 100%;
	block-size: auto;
	/* 任意の最大値 */
	max-inline-size: 500px;
	max-block-size: 300px;
}

また、既定値で<iframe>には内側に凹んだように見える枠線が引かれています。これを消去したり別の装飾を加えたい場合は、CSSのborder関連プロパティを調整します。例えば、枠線を完全に消去するスタイルは次のように書きます。


iframe {
	border: none;
}

これを応用して、自身のサーバーに置かれたファイルを表示させてみます。既定値で凹んでいるように見える枠線のスタイルを青い枠線に変更します。指定したファイルはインラインフレームよりも高さの寸法が長いので、スクロールした時の動作を確かめてみましょう。


<iframe src="sample/iframesample.html" style="width:100%; height:300px; border:3px solid #6699ff;">
インラインフレームに対応していない環境で表示されるテキスト。
</iframe>

インラインフレームに直接HTMLを指定する

srcdoc属性を使うと、インラインフレームに表示させる内容を直接HTMLで記述できます。ブラウザは<iframe>の中身を個別の文書として扱うため、<!DOCTYPE html>や<html>を省略しても問題なく表示されます。

srcdoc属性を使う上で注意しなければならないのは、ダブルクオーテーション（"）をそのまま配置できないという点です。srcdoc属性の値を宣言する範囲自体が同じ記号で指定されているため、これが途中で閉じてしまうことを回避しなければなりません。この問題を解決するためには、ダブルクオーテーション（"）を純粋な文字列として扱うために「"」というエンティティに置き換えて表記します。

srcdoc属性を使う場合は、念のためフォールバック値としてsrc属性を併記します。必要最低限の内容を表すとしたら以下のように記述できます。


<iframe
	src="url"
	srcdoc="
	<head>
		// 任意の内容
	</head>
	<body>
		// 任意の内容
	</body>
	">
</iframe>

srcdoc属性の値にダブルクオーテーション（"）を配置する場合、値の途中で属性が閉じてしまわないように「"」に置き換えてエスケープします。


<iframe
	src="url"
	srcdoc="
	<head>
		// 任意の内容
	</head>
	<body class=&quot;name&quot;>
		// 任意の内容
	</body>
	">
</iframe>

以上のことを踏まえて、インラインフレームに直接HTMLを記述した内容を表示させてみます。HTMLは構文の規則を守る限り<head>と<body>を省略できるので、極力必要な要素のみで記述しています。不安な方はそのまま残しておいても問題ありません。


<iframe
	src="sample/iframesample"
	style="width:100%; height:300px; border:3px solid #000;"
	srcdoc="
	<style>
		.sample-block {
			padding: 1rem;
			background-color: #000;
			color: #eee;
		}
		.sample-block h1{
			margin: 0;
			border-bottom: 1px solid currentColor;
		}
		.sample-block p {
			margin-block: 1rem 0;
		}
	</style>
	<div class=&quot;sample-block&quot;>
		<h1>iframeのsrcdoc属性</h1>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		〜
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
	</div>
	"></iframe>