iframe要素
Webページの中に、別のWebページを表示することができます。
本ページでは、iframe要素について説明します。
iframe要素とは
iframe要素を使うと、フレーム内に別のWebページを表示することができます。
iframeの定義は、以下のとおりです。
コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、対話型コンテンツ、認知可能コンテンツ |
---|---|
可能な親要素 | 埋め込みコンテンツを包含できる要素 |
可能なコンテンツ | なし |
タグの省略 | 不可 |
DOMインターフェース | HTMLIFrameElement |
利用例
以下は、iframeを使ったHTMLの例です。
<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の利用例は、以下のとおりです。
<iframe src="test.html" allow="autoplay"></iframe>
上記により、埋め込むページに動画があった場合、自動再生ができるようになります。
この機能は、以下が指定できます。
機能 | 説明 |
---|---|
autoplay | 自動再生 |
camera | カメラの制御 |
fullscreen | フルスクリーンでの表示 |
geolocation | 位置情報取得 |
picture-in-picture | ピクチャーインピクチャーでの表示(画面端で表示) |
また、機能を許可するオリジンを指定することもできます。
<iframe src="https://example.com/test.html" allow="autoplay https://example.com"></iframe>
上記は、https://example.comであれば自動再生を許可します。これは、直接オリジンを指定する以外に、以下を指定できます。
許可リスト | 説明 |
---|---|
* | すべてのオリジンで許可 |
self | iframeを記述したページと同じオリジンで許可 |
src | src属性と同じオリジンで許可(デフォルト) |
none | すべてのオリジンで許可しない |
デフォルトがsrcのため、機能を記述するだけで通常は許可されます。
以下のように、セミコロン(;)で区切って複数記述することもできます。
<iframe src="test.html" allow="autoplay 'self"; geolocation 'self'"></iframe>
上記により、自動再生と位置情報取得がiframeを記述したオリジンでだけ許可されます。
heightとwidth
heightとwidthの利用例は、以下のとおりです。
<iframe src="test.html" height="200" width="100"></iframe>
上記により、高さ200px、横幅100pxでフレームを表示します。
loading
loadingの利用例は、以下のとおりです。
<iframe src="test.html" loading="lazy"></iframe>
上記により、ページが表示された時点では、目に見える範囲(ビューポート内)にある時しかtest.htmlが読み込まれません。最初に読み込まれなかった場合は、スクロールしてビューポートに入る時にtest.htmlを読み込んで表示するようになります。
なお、デフォルトはeagerです。最初に、ビューポートにない場合でも読み込みます。
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の利用例は、以下のとおりです。
<iframe src="https://example.com/test.html" referrerpolicy="no-referrer"></iframe>
上記により、test.htmlを読み込む際にリファラーを送信しなくなります。詳細は、「referrerpolicy属性」ご参照ください。
sandbox
sandboxの利用例は、以下のとおりです。
<iframe src="test.html" sandbox></iframe>
上記によりフレームがサンドボックス化するため、同一オリジンのページであっても異なるオリジンとして扱われます。また、フレーム内でJavaScriptを実行したり、フォームを送信したりできなくなります。
一部機能だけ許可することもできます。
<iframe src="test.html" sandbox="allow-scripts"></iframe>
上記により、JavaScriptを許可します。この値は、以下が使えます。
熱尾 | 説明 |
---|---|
allow-forms | フォーム送信を許可 |
allow-popups | ポップアップを許可 |
allow-same-origin | 同一オリジンとして扱う |
allow-scripts | JavaScriptを許可 |
allow-top-navigation | 埋め込み元のページ移動を許可 |
複数指定する時は、半角スペースに続けて記述します。
例えば、JavaScriptは異なるオリジンでも動作しますが、フォームは同一オリジンでないと動作しません。このため、allow-formsを指定する時は、allow-same-originも併せて指定が必要です。
src
srcの利用例は、以下のとおりです。
<iframe src="test.html"></iframe>
すでに説明したとおり、埋め込む先のURLを指定します。
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要素(タグ)一覧」に戻る