May 1st,2015
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、インタラクティブ・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | エンベディッド・コンテンツが置ける場所 |
| 内容 | 本文参照 |
| タグの省略 | 不可 |
“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="" |
埋め込むHTML文書の内容 | HTMLコード | 埋め込むHTML文書の内容 |
| name="" | ブラウジング・コンテキストの名前 | 文字列 | ブラウジング・コンテキストの名前 |
| sandbox="" |
埋め込まれた文書の制限を指定 | allow-downloads |
埋め込まれた文書がダウンロードを実行することを許可する |
| allow-forms | 埋め込まれた文書がフォームを実行することを許可する | ||
| allow-modals |
埋め込まれた文書がモーダルウィンドウを開くことを許可する | ||
| allow-orientation-lock |
埋め込まれた文書がScreenOrientation APIによる画面の向きをロックする機能を無効化することを許可する | ||
| allow-pointer-lock | 埋め込まれた文書がPointer Lock APIを使用することを許可する | ||
| allow-popups | 埋め込まれた文書からのポップアップを有効にする | ||
| allow-popups-to-escape-sandbox |
埋め込まれた文書から新しく開いたブラウジング・コンテキストに“src”属性の値を継承しない | ||
allow-presentation |
埋め込まれた文書がPresentation APIを使用することを許可する | ||
| allow-same-origin | 埋め込まれた文書が親の文書と同じオリジンを持つものとみなす | ||
| allow-scripts | 埋め込まれた文書がスクリプトを実行することを許可する | ||
| allow-top-navigation | 埋め込まれた文書が最上位のブラウジング・コンテキストのコンテンツを操作することを許可する | ||
| allow-top-navigation-by-user-activation |
ユーザーの操作による場合に限り、埋め込まれた文書が最上位のブラウジング・コンテキストのコンテンツを操作することを許可する | ||
| allow-top-navigation-to-custom-protocols |
埋め込まれた文書が外部プロトコルを開くことを許可する | ||
| allow="" |
ブラウジング・コンテキストが利用できるブラウザの機能を指定する | fullscreen | 埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する |
| payment | 埋め込まれた文書がPayment Request APIを実行することを許可する | ||
| camera | 埋め込まれた文書がユーザーのデバイスのカメラにアクセスすることを許可する | ||
| microphone | 埋め込まれた文書がユーザーのデバイスのマイクにアクセスすることを許可する | ||
| 許可ポリシー | “Permissions Policy”仕様で定義された許可ポリシー | ||
allowfullscreen="" |
埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する | allowfullscreen | 埋め込まれた文書が“requestFullscreen()”を実行して全画面モードにすることを許可する |
| width="" | ブラウジング・コンテキストの横幅 | 正の整数 | ブラウジング・コンテキストの横幅のピクセル数 |
| height="" | ブラウジング・コンテキストの高さ | 正の整数 | ブラウジング・コンテキストの高さのピクセル数 |
| referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシー |
| loading="" |
埋め込まれた文書の読み込みのタイミングを指定 | lazy | 埋め込まれた文書がビューポートに入る直前まで読み込まない |
| eager | 埋め込まれた文書を直ちに読み込む | ||
“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 | 右フロート | ||
| seamless="" |
埋め込まれた文書にも文書のスタイルを適用する | seamless | 埋め込まれた文書にも文書のスタイルを適用する |
| allowpaymentrequest="" |
埋め込まれた文書がPayment Request APIを実行することを許可する | allowpaymentrequest | 埋め込まれた文書がPayment Request APIを実行することを許可する |
| allowusermedia="" |
埋め込まれた文書が“getUserMedia()”を実行してユーザーのカメラやマイクにアクセスにすることを許可する | allowusermedia | 埋め込まれた文書が“getUserMedia()”を実行してユーザーのデバイスのカメラやマイクにアクセスにすることを許可する |
要素の内容
“iframe”要素は終了タグがありますがコンテンツ・モデルは“空”であり、内容は無意味なテキストとして扱われます。
ただし、HTML4までは“iframe”要素の内容は“iframe”要素に対応していないブラウザ向けの代替コンテンツとして定義されていたため、このテキストは古いバージョンのブラウザでは代替テキストとして機能します。
仕様書
“iframe”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <iframe> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLIFrameElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString src;
[CEReactions] attribute DOMString srcdoc;
[CEReactions] attribute DOMString name;
[SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;
[CEReactions] attribute DOMString allow;
[CEReactions] attribute boolean allowFullscreen;
[CEReactions] attribute DOMString width;
[CEReactions] attribute DOMString height;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString loading;
readonly attribute Document? contentDocument;
readonly attribute WindowProxy? contentWindow;
Document? getSVGDocument();
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
iframe {
border: 2px inset;
}
