このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

iframe要素:他の文書の埋め込み

記事May 1st,2015
July 7th,2020
入れ子にしたブラウジング・コンテキストを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

iframe”要素は入れ子にしたブラウジング・コンテキストを表す要素です。“iframe”要素は文書の中にブラウジング・コンテキストを埋め込み、そこに別の文書を表示させることができます。

埋め込まれる文書はsrc”属性で別のHTML文書を指定するか、srcdoc”属性で“iframe”要素に直接コードを記述します。

一つの文書の中に配置できる“iframe”要素の数に制限はありませんが、一つ一つの“iframe”要素は完全なブラウジング・コンテキストであり、多用すると必要なメモリーやリソースが増加します。このため多用は推奨されません。

HTML4までそう呼ばれていたように“インラインフレーム”とも呼ばれます。HTML4まではframe”要素frameset”要素noframe”要素とともにフレーム関連の要素うちの一つでしたが、アクセシビリティやユーザビリティに悪影響を及ぼすとして“iframe”要素以外は廃止されました。

サンプルコード

<iframe src="sample.html"></iframe>

width”属性height”属性やスタイルシートで大きさを指定していない場合はブラウザのデフォルトの大きさで表示されます。

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
src="" 埋め込むHTML文書の指定 URL 埋め込むHTML文書のURL
srcdoc=""HTML5で追加 埋め込むHTML文書の内容 HTMLコード 埋め込むHTML文書の内容
name="" ブラウジング・コンテキストの名前 文字列 ブラウジング・コンテキストの名前
sandbox=""HTML5で追加 埋め込まれた文書の制限を指定 allow-forms 埋め込まれた文書がフォームを実行することを許可する
allow-modalsHTML Living Standardで定義 埋め込まれた文書がモーダルウィンドウを開くことを許可する
allow-orientation-lockHTML Living Standardで定義 埋め込まれた文書がScreenOrientation APIによる画面の向きをロックする機能を無効化することを許可する
allow-pointer-lock 埋め込まれた文書がPointer Lock APIを使用することを許可する
allow-popups 埋め込まれた文書からのポップアップを有効にする
allow-popups-to-escape-sandboxHTML Living Standardで定義 埋め込まれた文書から新しく開いたブラウジング・コンテキストに“src”属性の値を継承しない
allow-presentationHTML5.2で追加 埋め込まれた文書がPresentation APIを使用することを許可する
allow-same-origin 埋め込まれた文書が親の文書と同じオリジンを持つものとみなす
allow-scripts 埋め込まれた文書がスクリプトを実行することを許可する
allow-top-navigation 埋め込まれた文書が最上位のブラウジング・コンテキストのコンテンツを操作することを許可する
allow-top-navigation-by-user-activationHTML Living Standardで定義 ユーザーの操作による場合に限り、埋め込まれた文書が最上位のブラウジング・コンテキスト
allow-downloadsHTML Living Standardで定義 埋め込まれた文書がダウンロードを実行することを許可する
allow=""HTML Living Standardで定義 ブラウジング・コンテキストが利用できるブラウザの機能を指定する fullscreen 埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する
payment 埋め込まれた文書がPayment Request APIを実行することを許可する
camera 埋め込まれた文書がユーザーのデバイスのカメラにアクセスすることを許可する
microphone 埋め込まれた文書がユーザーのデバイスのマイクにアクセスすることを許可する
機能ポリシー “Permissions Policy”仕様で定義された機能ポリシー
allowfullscreen=""HTML5.1で追加 埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する allowfullscreen 埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する
allowpaymentrequest=""HTML5.2で追加 埋め込まれた文書がPayment Request APIを実行することを許可する allowpaymentrequest 埋め込まれた文書がPayment Request APIを実行することを許可する
width="" ブラウジング・コンテキストの横幅 正の整数 ブラウジング・コンテキストの横幅のピクセル数
height="" ブラウジング・コンテキストの高さ 正の整数 ブラウジング・コンテキストの高さのピクセル数
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシー

src”属性srcdoc”属性の両方を指定した場合はsrcdoc”属性が優先されます。ただし、srcdoc”属性に対応していないブラウザはsrc”属性で指定した文書が埋め込まれます。

マイクロデータ属性itemprop”属性を指定した場合はsrc”属性を指定しなければなりません。

過去に定義された属性

属性
属性 説明 説明
longdesc=""注意 フレームを説明した文書へのリンク URL フレームを説明した文書のURL
scrolling=""注意 スクロールバーの表示 auto スクロールバーを必要な時だけ表示する
yes スクロールバーを常に表示する
no スクロールバーを表示しない
frameborder=""注意 境界線の表示 0 境界線を表示しない
1 境界線を表示する
marginwidth=""注意 フレーム内の左右の余白 正の整数 左右の余白のピクセル数
marginheight=""注意 フレーム内の上下の余白 正の整数 上下の余白のピクセル数
align=""注意 位置の指定 top 上端揃え
middle 中央揃え
bottom 下端揃え
left 左フロート
right 右フロート
allowusermedia=""注意 埋め込まれた文書が“getUserMedia()”を実行してユーザーのカメラやマイクにアクセスにすることを許可する allowusermedia 埋め込まれた文書が“getUserMedia()”を実行してユーザーのデバイスのカメラやマイクにアクセスにすることを許可する

要素の内容

iframe”要素は終了タグがありますが空要素であり、内容は無意味なテキストとして扱われます。

ただし、HTML4までは“iframe”要素の内容は“iframe”要素に対応していないブラウザ向けの代替コンテンツとして定義されていたため、このテキストは古いバージョンのブラウザでは代替テキストとして機能します。

仕様書

iframe”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<iframe>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
src=""
定義あり

定義あり

定義あり

定義あり

定義あり
srcdoc=""
定義なし

定義あり

定義あり

定義あり

定義あり
name=""
定義あり

定義あり

定義あり

定義あり

定義あり
sandbox=""
定義なし

定義あり

定義あり

定義あり

定義あり
allow=""
定義なし

定義なし

定義なし

定義なし

定義あり
allowfullscreen=""
定義なし

定義なし

定義あり

定義あり

定義あり
allowpaymentrequest=""
定義なし

定義なし

定義なし

定義あり

定義あり
width=""
定義あり

定義あり

定義あり

定義あり

定義あり
height=""
定義あり

定義あり

定義あり

定義あり

定義あり
referrerpolicy=""
定義なし

定義なし

定義なし

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
longdesc=""
定義あり

削除

削除

削除

削除
frameborder=""
定義あり

削除

削除

削除

削除
marginwidth=""
定義あり

削除

削除

削除

削除
marginheight=""
定義あり

削除

削除

削除

削除
scrolling=""
定義あり

削除

削除

削除

削除
align=""
定義あり

削除

削除

削除

削除
allowusermedia=""
定義なし

定義なし

定義なし

定義なし

削除
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク