iframe要素

iframe要素は、ネストされたブラウジング コンテキスト、いわゆるインラインフレームを表します。


src属性

src属性は、インラインフレームに表示するページのURLを指定します。


srcdoc属性

srcdoc属性は、インラインフレームに表示するページのコンテンツを指定します。表示するコンテンツは、HTMLソースコードで記述します。srcdoc属性に記述するHTMLソースコードは以下のHTML構文で、body要素のコンテンツがインラインフレームに表示されます。

なお、記号の「&」は「&」、「"」は「"」とエスケープします。同様にtabや、改行など一部の空白文字もエスケープする必要があるため(正確にはこれはXML構文の場合ですが)、タグは以下のようにtabや改行をせずに記述します。

srcdoc属性の値 例1)

<!DOCTYPE html><html lang=&quot;ja&quot;><head><meta charset=&quot;UTF-8&quot;><title>タイトル</title></head><body><p>AAA aaa</p></body></html>
※表示上改行されていますが、テキスト・エディタ上では一行で書かれています。

ただし、DOCTYPE宣言、html要素、head要素、title要素、body要素は省略可能なので、実際の場合はbody要素のコンテンツのみsrcdoc属性に指定すれば良いことになります。

srcdoc属性の値 例2)

<p>AAA aaa</p>

name属性

name属性は、インラインフレームの名前を指定します。


width属性、height属性

width属性は画像の幅、height属性は画像の高さを指定します。値は負以外の整数(ピクセル)ですが、単位の(px)はつけません。なお、HTML5より値の単位にパーセントを使うことができなくなりました。また、元のリソースと異なるアスペクト比で指定し故意に引き延ばすことはできません。


例a)

<iframe src="example.html" width="300" height="60"></iframe>

表示)


例b)

<iframe srcdoc="<p>AAA aaa</p>" width="300" height="60"></iframe>

表示)

Chrome 39.0
iframe要素 srcdoc属性の例 Chrome 39.0

Firefox 33.1.1
iframe要素 srcdoc属性の例 Firefox 33.1.1


sandbox属性

sandbox属性は、iframe要素では主にホストするサードパーティー・コンテンツの希望しない特定の操作から隔離するために使用されます。まず、sandbox属性を指定することで、iframe要素でホストされているすべてのコンテンツに以下に記す制限を設けます。


上記の制限を設けた上で、制限を許可するための値を指定し、制限をコントロールします。値は以下のキーワードです。キーワードは半角スペースで区切り、複数指定できます。


キーワード


オリジン(Origin)

オリジンとは、簡単に言えば、リソース自身のスキーム、ホスト、ポートの組み合わせのことを言います。スキーム、ホスト、ポートとは、例えば、リソース(index.html)が、http://example.com/index.htmlならば、httpがスキーム、example.comがホストで、httpには80番のポート番号が割り当てられていることになります。

カテゴリ
フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツパルパブル・コンテンツ
要素を使用することができる場所
エンベッディッド・コンテンツが使用できる場所。
コンテンツ モデル(内容に含めることのできる要素)
テキスト。(ただし、テキストは何も意味を持ちません。)
コンテンツ属性
グローバル属性src属性srcdoc属性name属性sandbox属性width属性、height属性

この要素に追加された属性
sandbox属性srcdoc属性seamless属性
この要素で変更があった属性
width属性、height属性。
この要素で廃止された属性
  • longdesc属性。
  • align属性、frameborder属性、marginheight属性、marginwidth属性、scrolling 属性。この項の属性はCSSでより良い処理ができるため廃止されました。