iframe 要素

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

アクセシビリティの観点から、iframe 要素には title 属性や aria-label 属性を使用して適切な名前を付与することを推奨します。

src 属性

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

srcdoc 属性

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

name 属性

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

sandbox 属性

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

width 属性

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

height 属性

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

referrerpolicy 属性

リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定します。

loading 属性

ユーザエージェントに画像取得のヒントを提供します。iframe 要素、および img 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み（Lazy loading）を実現します。

<aside>
 <h1>広告</h1>
 <iframe src="ad.html" width="300" height="300" title="広告"></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>

<!--  sandbox 属性を使用した例 -->
<iframe src="sample.html" sandbox></iframe>

<!-- XML として妥当な書き方 -->
<iframe src="sample.html" sandbox="sandbox"></iframe>

<!-- iframe 要素のコンテンツモデルは「空」なので、内容を持つことはできません -->
<iframe src="sample.html" width="300" height="300">
 × このような記述は構文エラーです
</iframe>

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○