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

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

<iframe>タグの説明

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

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

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

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

<iframe>タグの特徴

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

<iframe>に指定できる主な属性

src="URL"
フレーム内に表示するファイルを指定します。同一オリジンポリシーに従う空白ページを埋め込む場合は、 "about:blank" の値を使用してください。
srcdoc="HTML"
フレーム内に表示する内容をHTMLで指定します。この属性がある場合、src属性は上書きされます。ブラウザがこの属性に対応していない場合、src属性のURLが読み込まれます。
name="any-name"
フレームの名前を指定します。リンクやフォームのtarget属性、JavaScriptの引数として使用できます。
width="num"
フレームの幅を単位なしの整数で指定するとピクセル値で表示されます。CSSの方がより柔軟な対応を行えます。
height="num"
フレームの高さを単位なしの整数で指定するとピクセル値で表示されます。CSSの方がより柔軟な対応を行えます。
allow="value"
iframeが使用する機能ポリシーを指定します。この属性に Feature Policy 仕様に基づく値を設定すると、ユーザエージェントにおける特定の機能や API を有効化、あるいは無効化したり、動作を変更することができます。
  • autoplay:iframeに埋め込まれた動画を自動的に再生します。
  • 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>の使い方とサンプル

インラインフレームの基本的な書き方は以下の通りです。まずは、src属性に外部サイトのURLを指定して、ページに埋め込んでみましょう。幅と高さの指定を属性で行うとピクセル単位の固定値で表示されます。内容がその範囲を超える場合は、フレームの内側をスクロールできるようになります。

HTML
<iframe src="https://example.org" width="300" height="200"></iframe>
表示確認

次に、自身のサーバーに置かれたファイルを表示させてみます。ここでは横幅の指定をCSSに置き換えてレスポンシブに対応させています。iframeの高さをコンテンツに合わせるには、JavaScriptで内部ドキュメントのサイズを取得する必用があります。ついでに、フレームの外枠を消して自然な見栄えに変更しています。

HTML
<iframe src="sample/iframesample.html" style"width:100%; min-height:150px; border:none;">
※インラインフレームに対応していない環境用の代替テキスト。
</iframe>
表示確認

外部ファイルを使わずにiframeの表示内容を指定することもできます。以下の例では、srcdoc属性を使って、HTMLを直接書き込んでいます。ブラウザは、iframeの中身を個別の文書として扱うため、<!DOCTYPE html><html>を省略しても問題なく表示されます。

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

HTML
<iframe src="sample/iframesample" style="width:100%; min-height:200px; border:none;"
	srcdoc="
	<style>
		#sbox {
			padding: 10px;
			background-color: #000;
			color: #eee;
		}
		#sbox h1{
			border-bottom: 1px solid #ccc;
		}
		#sbox p {
			font-style: italic;
		}
	</style>
	<div id=&quot;sbox&quot;>
		<h1>iframeのsrcdoc属性</h1>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
		<p>インラインフレーム内のテキストです。</p>
	</div>
	"></iframe>
表示確認

<iframe>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する