iframe 要素他の文書を埋め込む

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

さらに詳細な説明を見る

サンプルソースを見る

iframe 要素の仕様

カテゴリ
コンテンツモデル
  • 文書を HTML として扱う場合はテキスト
  • 文書を XML として扱う場合は空でななければいけません
この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLIFrameElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString srcdoc;
           attribute DOMString name;
  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
           attribute boolean seamless;
           attribute DOMString width;
           attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
};

詳細説明

src 属性

src 属性には iframe 要素で埋め込む HTML 文書の URI を指定します。src 属性が指定されている場合、その値に空白文字列は認められず、かつ妥当な URI が指定される必要があります。もし itemprop 属性が iframe 要素に指定されている場合、src 属性は必ず指定されている必要があります。

srcdoc 属性

srcdoc 属性には iframe 要素で埋め込む HTML 文書の内容を指定します。つまり、表示したい HTML を属性値として直接入力します。詳細は srcdoc 属性のページをご覧ください。

name 属性

埋め込まれたブラウジング・コンテンツに名前を付与します。この名前はリンクターゲットとして利用することもできます。

sandbox 属性

sandbox 属性を指定することで、iframe 要素によって埋め込まれた HTML 文書に制限をかけることができます。指定できる値など詳細は sandbox 属性のページをご覧ください。

seamless 属性

seamless 属性を指定された iframe 要素は、境界線などがなく、あたかも親となる文書の一部のように埋め込まれます。また、親となる文書から埋め込まれた文書に対してスタイルを適用したりできます。seamless 属性は論理属性です。

width 属性

iframe 要素の横幅を指定します。

height 属性

iframe 要素の高さを指定します。

iframe 要素のサンプルソース

<aside>
 <h1>広告</h1>
 <iframe src="ad.html" width="300" height="300"></iframe>
</aside>
<!-- srcdoc 属性を使用した例 。値の中の「"」と「&」は文字参照にする必要があります -->
<iframe srcdoc="<p><dfn><abbr title=&quot;HyperText Markup Language&quot;>HTML</abbr></dfn>とは…</p>"></iframe>
 
<!-- XML として扱う場合は、属性値の「<」「>」も文字参照にします -->
<iframe srcdoc="&lt;p&gt;&lt;dfn&gt;&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt;&lt;/dfn&gt;とは…&lt;/p&gt;"></iframe>
<!-- seamless 属性や sandbox 属性を使用した例 -->
<iframe src="sample.html" seamless sandbox></iframe>
<!-- XML として妥当な書き方 -->
<iframe src="sample.html" seamless="seamless" sandbox="sandbox"></iframe>
<!-- HTML 文書においては、iframe 要素の内容テキストがフォールバックになります -->
<iframe src="sample.html" width="300" height="300">
 ここにはサンプル文字列が表示されています。
</iframe>

W3C HTML5 仕様書

4.8.2 The iframe element