iframe要素

Webページの中に、別のWebページを表示することができます。

本ページでは、iframe要素について説明します。

iframe要素とは

iframe要素を使うと、フレーム内に別のWebページを表示することができます。

iframeの定義は、以下のとおりです。

【iframeの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ埋め込みコンテンツ対話型コンテンツ認知可能コンテンツ
可能な親要素 埋め込みコンテンツを包含できる要素
可能なコンテンツ なし
タグの省略 不可
DOMインターフェース HTMLIFrameElement

利用例

以下は、iframeを使ったHTMLの例です。

【iframeの利用例】
<iframe src="test.html" title="テストページ"></iframe>

上記により、test.htmlの内容が以下のように表示されます。

ブラウザの画面で、「テストです。」と表示されている周りには枠が表示されています。

test.htmlの内容は、「テストページです。」と記述している部分です。フレームに枠が表示されて、他ページの内容を表示していることがわかりやすくなっています。titleは、フレーム内の内容がわかるように記述しておくと、読み上げソフトなどを使った際に内容の特定がしやすくなります。

属性

グローバル属性と、以下が使えます。

allow
オリジンごとに、ブラウザの機能やデバイス(カメラなど)の利用有無を指定します。
height
フレームの高さをpxで指定します。
loading
他ページを読み込むタイミングを指定します。
name
フレームに名前を付けます。formやa要素のtarget属性で指定すると、このフレームに埋め込むページが変わります。
referrerpolicy
送信するリファラーを指定します。
sandbox
フレームをサンドボックス化します。サンドボックスは、制限付きの領域で動作させることで、悪意のある動作を防ぐ目的で使います。
src
フレーム内に表示するページのURLを指定します。
srcdoc
他ページを表示するのではなく、ここに記述したHTMLをフレーム内に表示します。
width
フレームの横幅をpxで指定します。

次からは、各属性の利用例を示します。

allow

allowの利用例は、以下のとおりです。

【allowの利用例】
<iframe src="test.html" allow="autoplay"></iframe>

上記により、埋め込むページに動画があった場合、自動再生ができるようになります。

この機能は、以下が指定できます。

【allow属性で指定できる機能(例)】
機能 説明
autoplay 自動再生
camera カメラの制御
fullscreen フルスクリーンでの表示
geolocation 位置情報取得
picture-in-picture ピクチャーインピクチャーでの表示(画面端で表示)

また、機能を許可するオリジンを指定することもできます。

【allowの許可リスト利用例】
<iframe src="https://example.com/test.html" allow="autoplay https://example.com"></iframe>

上記は、https://example.comであれば自動再生を許可します。これは、直接オリジンを指定する以外に、以下を指定できます。

【許可リスト】
許可リスト 説明
* すべてのオリジンで許可
self iframeを記述したページと同じオリジンで許可
src src属性と同じオリジンで許可(デフォルト)
none すべてのオリジンで許可しない

デフォルトがsrcのため、機能を記述するだけで通常は許可されます。

以下のように、セミコロン(;)で区切って複数記述することもできます。

【allowの複数組み合わせ例】
<iframe src="test.html" allow="autoplay 'self"; geolocation 'self'"></iframe>

上記により、自動再生と位置情報取得がiframeを記述したオリジンでだけ許可されます。

heightとwidth

heightとwidthの利用例は、以下のとおりです。

【heightとwidthの利用例】
<iframe src="test.html" height="200" width="100"></iframe>

上記により、高さ200px、横幅100pxでフレームを表示します。

loading

loadingの利用例は、以下のとおりです。

【loadingの利用例】
<iframe src="test.html" loading="lazy"></iframe>

上記により、ページが表示された時点では、目に見える範囲(ビューポート内)にある時しかtest.htmlが読み込まれません。最初に読み込まれなかった場合は、スクロールしてビューポートに入る時にtest.htmlを読み込んで表示するようになります。

なお、デフォルトはeagerです。最初に、ビューポートにない場合でも読み込みます。

name

nameの利用例は、以下のとおりです。

【nameの利用例】
<iframe src="test.html" name="test"></iframe>
<a href="test2.html" target="test">テスト2ページ</a>

a要素のターゲットでtestを指定しています。これは、iframeのnameに対応しています。このため、リンクをクリックするとフレーム内がtest2.htmlに切り替わります。

referrerpolicy

referrerpolicyの利用例は、以下のとおりです。

【referrerpolicyの利用例】
<iframe src="https://example.com/test.html" referrerpolicy="no-referrer"></iframe>

上記により、test.htmlを読み込む際にリファラーを送信しなくなります。詳細は、「referrerpolicy属性」ご参照ください。

sandbox

sandboxの利用例は、以下のとおりです。

【sandboxの利用例】
<iframe src="test.html" sandbox></iframe>

上記によりフレームがサンドボックス化するため、同一オリジンのページであっても異なるオリジンとして扱われます。また、フレーム内でJavaScriptを実行したり、フォームを送信したりできなくなります。

一部機能だけ許可することもできます。

【sandboxで一部機能を許可】
<iframe src="test.html" sandbox="allow-scripts"></iframe>

上記により、JavaScriptを許可します。この値は、以下が使えます。

【sandboxで使える値(例)】
熱尾 説明
allow-forms フォーム送信を許可
allow-popups ポップアップを許可
allow-same-origin 同一オリジンとして扱う
allow-scripts JavaScriptを許可
allow-top-navigation 埋め込み元のページ移動を許可

複数指定する時は、半角スペースに続けて記述します。

例えば、JavaScriptは異なるオリジンでも動作しますが、フォームは同一オリジンでないと動作しません。このため、allow-formsを指定する時は、allow-same-originも併せて指定が必要です。

src

srcの利用例は、以下のとおりです。

【srcの利用例】
<iframe src="test.html"></iframe>

すでに説明したとおり、埋め込む先のURLを指定します。

srcdoc

srcdocの利用例は、以下のとおりです。

【srcdocの利用例】
<iframe srcdoc="<h1>テスト</h1><p>これは、テストページです</p>"></iframe>

src属性がなく、srcdocにHTMLを直接記述しています。上記は、以下のように表示されます。

ブラウザの画面で、フレームの中に見出しで「テスト」、段落で「これは、テストページです。」と表示されています。

src属性があった場合でも、srcdocの内容が優先されます。srcdocに対応していないブラウザは、src属性で指定したページを表示します。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
iframe
allow ×
height
loading × × ×
name
referrerpolicy ×
sandbox
src
srcdoc ×
width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
iframe
allow ×
height
loading × ×
name
referrerpolicy ×
sandbox ×
src
srcdoc
width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る