他のHTML文書を埋め込む

iframe

< iframe 【 アイフレーム 】 属性="属性値">~< /iframe >

iframe要素は入れ子になったブラウジングコンテキストを表します。文書内に他のHTML文書を埋め込むことができます。

カテゴリー ・インタラクティブコンテンツ
・エンベッディッドコンテンツ
・パルパブルコンテンツ
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル ・文書をHTMLとして扱う場合はテキスト
・文書をXMLとして扱う場合は空
使用できる文脈 エンベッディッドコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

height 【ハイト 】

埋め込まれたHTML文書の高さを指定します。値には正の整数を指定する必要があります。

name 【ネーム 】

埋め込まれた文書に名前を付与します。この名前を使用して、JavaScriptから要素にアクセスしたり、付与した名前をリンクのターゲットに使用したりできます。

sandbox 【サンドボックス 】

seamless属性の値が空の状態で指定されたiframe 要素によって埋め込まれたHTML文書には、以下のような制限がかかります。

  • 埋め込まれた文書は、固有のオリジン（URLスキーム、ホストおよびポートの組み合わせ）を持つものとして扱われます。
  • 埋め込まれた文書からのフォーム送信とスクリプトの実行は無効にされます。
  • 埋め込まれた文書から別のブラウジングコンテキストを指しているリンクは無効になります。

その上で、次ページの各属性値を指定して、制限をコントロールすることができます。これらの値は、半角スペースで区切って複数指定することが可能です。

allow-same-origin 埋め込まれた文書を固有のオリジンとはせず、親文書と同じオリジンを持つものとします。
allow-top-navigation 埋め込まれた文書から別のブラウジングコンテキストを指しているリンクを有効にします。
allow-forms 埋め込まれた文書からのフォーム送信を有効にします。
allow-popups 埋め込まれた文書からのポップアップを有効にします。
allow-scripts 埋め込まれた文書からのスクリプトの実行を有効にします。

seamless 【シームレス 】

この属性を指定されたiframe要素は、境界線などがなく、あたかも親文書の一部のように（シームレスに）埋め込まれます。また、親文書から埋め込まれた文書に対してスタイルを適用したりできます。seamless属性は論理属性です。以下に挙げる条件がすべて満たされるとき、iframe要素はシームレスモードで動作します。

  • seamless属性が指定され、かつsandbox属性が指定されていない
  • 埋め込まれる文書が親文書と同一オリジンを持つか、srcdoc属性を指定されている

また、シームレスモードで動作するiframe要素は以下のように扱われます。

  • iframe内に読み込まれたリンクを開く場合、親文書上のリンクとして開く
  • 親文書で指定したスタイルはiframe内の要素にも継承する

src【ソース 】

文書内に埋め込む他のHTML文書のURLを指定します。src属性が指定されている場合、その値に空白文字列は認められず、かつ妥当なURLが指定される必要があります。マイクロデータのitemprop属性がiframe要素に指定されている場合は、src属性は必ず指定します。

srcdoc 【 ソース・ドキュメント 】

文書内に埋め込むHTML文書の内容を指定します。つまり、表示したいHTMLを属性値として直接入力します。入力する際の記述方法は仕様によって厳密に定義されていますが、実際にはbody要素の内容のみ記述すれば大丈夫です。ただし、srcdoc属性値に入る「"」および「&」は文字参照（それぞれ「&quot;」「&amp;」）とする必要があります。なお、src属性とsrcdoc属性が両方とも指定されている場合、srcdoc属性の内容が優先的に読み込まれます。

width 【ウィズ 】

埋め込まれたHTML文書の幅を指定します。値には正の整数を指定する必要があります。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

ポイント

  • iframe要素を用いて他に用意しておいた広告用のWebページを表示させる場合は、以下のように記述します。
<aside>
  <h1>広告</h1>
  <iframe src="ad.html" width="300" height="300"></iframe>
</aside>
  • srcdoc属性を用いる場合は、以下のように属性値に直接、HTML文書を入力します。ただし、文書中の「"」は文字参照として「&quote;」と記述する必要があります。
<iframe srcdoc="<p><dfn><abbr title=&quot;HyperText Markup Language&quot;>HTML</abbr></dfn>とは... </p>"></iframe>
  • XHTML5文書では、srcdoc属性に入るXHTMLもXMLとして妥当な構文にする必要があります。終了タグを省略したりすることはできません。タグを囲む「<」「>」も文字参照として「&lt;」「&gt;」と記述する必要があります。