iframe 要素

概要

HTML インラインフレーム要素 (<iframe>) は、ブラウジングコンテキスト (browsing context) の入れ子を表現し、事実上現在のページに他の HTML ページを埋め込むことができます。HTML 4.01 では、文書は head および body、または head および frame-set を持つことができ、body と frame-set の両方は持ちません。しかし、<iframe> は通常の文書 body 内で使用できます。ブラウジングコンテキストはそれぞれ、セッション履歴とアクティブな文書を持ちます。埋め込みコンテンツを含む側のブラウジングコンテキストを、親ブラウジングコンテキストと呼びます。トップレベルのブラウジングコンテキスト（親を持ちません）は通常ブラウザウィンドウです。

属性

この要素はグローバル属性を持ちます。

align 非推奨 HTML4.01 廃止 HTML5

フレームを含むコンテキストに対する、フレームの整列方法を指定します。

allowfullscreen

Element.requestFullScreen() を呼び出してフルスクリーンモードにできれば、この属性が true にセットされます。セットされていなければ、要素はフルスクリーンモードにできません。

frameborder HTML 4 のみ

値が 1 (デフォルト) なら、ブラウザはこのフレームと他のすべてのフレームの間にボーダーを描きます。値が 0 なら、他フレームとの間にボーダーは描かれません。

height

フレームの高さをHTML5CSS ピクセル、またはHTML 4.01ピクセルかパーセンテージで示します。

longdesc HTML 4 のみ

フレームの長い説明の URI です。 広まっている誤用のせいで、非視覚ブラウザでは有益ではありません。

marginheight HTML 4 のみ

フレームのコンテンツと top および bottom のマージン間の、ピクセル単位の余白量です。

marginwidth HTML 4 のみ

フレームのコンテンツと left および right のマージン間の、ピクセル単位の余白量です。

mozallowfullscreen

代わりに allowfullscreen を使ってください。Gecko 9.0 以降では、フレームがelement.mozRequestFullScreen() メソッドを呼び出してフルスクリーンモードにできるなら true にセットできます。セットされていなければ、その要素はフルスクリーンモードにできません。

webkitallowfullscreen

代わりに allowfullscreen を使ってください。Chrome 17 以降 (それ以前でもおそらく) では、フレームが element.webkitRequestFullScreen() メソッドを呼び出してフルスクリーンモードにできるなら true にセットできます。セットされていなければ、その要素はフルスクリーンモードにできません。

mozapp Only available on Firefox OS

open web app をホストするフレームで app manifest の URL を定義します。これは app が正しい権限を持って読み込まれることを保証します。詳細は Using the Browser API をご覧ください。Gecko 13.0 以降で利用可能です。

mozbrowser Only available on Firefox OS

フレームが、トップレベルの閲覧ウィンドウであるように埋め込みコンテンツに現れることを示します。つまり、window.top, window.parent, window.frameElement などがフレームの階層構造を反映しないということです。これにより、正しい権限でもって完全にウェブ技術だけでウェブブラウザの UI を実装することができます。詳細は Using the Browser API をご覧ください。Gecko 13.0 以降で利用可能です。

name

埋め込みのブラウジングコンテキスト（またはフレーム）の名前です。<a> や <form> 要素の target 属性の値、もしくは <input> や <button> 要素の formtarget 属性の値として使えます。

referrerpolicy

リソースを読み込む際にどのリファラを使用するかを示す文字列です:

• "no-referrer" は、Referer: ヘッダを送信しないことを表します。
• "no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer: ヘッダを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザエージェントのデフォルトの動作です。
• "origin" は、ページの生成元 (大まかにいえば���キーム、ホスト、ポート) をリファラとすることを表します。
• "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラのパスも含めます。
• "unsafe-url" は、リファラに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザ名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。

remote Only available on Firefox OS

別のコンテンツプロセスでフレームのページを読み込みます。

scrolling HTML 4 のみ

フレームにスクロールバー（もしくは他のスクロール用機能）をいつ表示するか決めるための列挙属性です:

• auto: 必要なときだけ表示
• yes: 常にスクロールバーを表示
• no: スクロールバーを一切表示しない

sandbox HTML5 のみ

空文字列として定義されると、インラインフレームに表示できるコンテンツに最大限の制限をかけることができます。もしくは特定の制限を取り除くトークンを空白区切りで与えることができます。以下は有効なトークンです:

• allow-forms: 埋め込みのブラウジングコンテキストにフォームの実行を許可します。このキーワードが使われない場合はこの操作は行えません。
• allow-modals: 埋め込みのブラウジングコンテキストがモーダルウィンドウを開くことを許可します。
• allow-orientation-lock: 埋め込みのブラウジングコンテキストが、スクリーンの向きをロックする機能を無効化することを許可します。
• allow-pointer-lock: 埋め込みのブラウジングコンテキストに、Pointer Lock API の使用を許可します。
• allow-popups: (window.open、target="_blank"、showModalDialog のような) ポップアップを許可します。このキーワードを与えなければ、これらの機能は黙って失敗します。
• allow-popups-to-escape-sandbox: (Chrome および Opera) サンドボックス化したドキュメントが、サンドボックスのフラグを強制されない新たなウィンドウを開けるようにします。これにより、例えばサードパーティの広告に、元のページと同じ制限を強制されない安全なサンドボックスを提供できます。
• allow-same-origin: コンテンツが通常のオリジンを持つとみなします。このキーワードが使われない場合は、埋め込みコンテンツは独自オリジンを持つとみなされます。
• allow-scripts: 埋め込みのブラウジングコンテキストにスクリプトの実行を許可します（ただしポップアップウィンドウは作れません）。このキーワードが使われない場合はこの操作は行えません。
• allow-top-navigation: 埋め込みのブラウジングコンテキストがトップレベルのブラウジングコンテキストのコンテンツを操作（読み込み）することを許可します。このキーワードが使われない場合はこの操作は行えません。

註:

• 埋め込み文書がメインページと同一オリジンを持つ場合、allow-scripts と allow-same-origin の同時使用は、埋め込み文書がプログラムから sandbox 属性を削除することができるようになるため、用いるべきではありません。容認されているとはいえ、sandbox 属性を使わないのと同様に安全ではありません。
• サンドボックス化は一般に、攻撃者が潜在的な攻撃力を持つコンテンツを、ユーザブラウザのサンドボックス化した iframe の外に表示するような準備ができるなら、最小限の助けにしかなりません。潜在的なダメージを抑えるため、そうしたコンテンツは別の専用ドメインから提供することが推奨されます。
• sandbox 属性は Internet Explorer 9 以前でサポートされていません。

src

埋め込むページの URL。

srcdoc HTML5 のみ

埋め込みコンテキストを含めるページのコンテンツ。この属性は、一般的に sandbox および seamless 属性とともに使用すると想定されています。ブラウザが srcdoc 属性をサポートする場合は、src 属性で指定したコンテンツより優先します。ブラウザが srcdoc 属性をサポートしない場合は、src 属性でファイルを指定していれば、それを代わりに表示します。この属性の内容が script タグを含む場合、スクリプトを実行するためには、たとえスクリプトの後に何もなかったとしても script の閉じタグが必須であることに注意してください。

width

フレームの幅をHTML5 CSS ピクセル、またはHTML 4.01ピクセルかパーセンテージで示します。

スクリプト操作

<frame> 要素のようなインラインフレームは window.frames 擬似配列に入ります。

スクリプトは DOM の iframe 要素から contentWindow プロパティを使って、それを含む HTML ページの window オブジェクトにアクセスできます。contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。これは Internet Explorer の IE8 以前のバージョンではサポートされていません。

スクリプトは、フレームの内側からは window.parent を使って親ウィンドウを参照できます。

フレームの内容にアクセスしようとするスクリプトは同一オリジンポリシーに従います。別のドメインから読み込まれたスクリプトは他の window オブジェクトのほとんどのプロパティにアクセスできません。これは、親ウィンドウにアクセスしようとするフレーム内のスクリプトにも当てはまります。それでもドメイン間のやりとりは window.postMessage で達成できます。

例

<iframe> 要素の使用例を示します。

シンプルな <iframe>

こちらが <iframe> の基本的な使用例です。フレームを作成した後に、ユーザーがボタンをクリックすると、タイトルを取得してアラートで表示します。

HTML

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

表示結果

<iframe> 内のリンクを別のタブで開く

このサンプルでは、Google マップを iframe 内で表示しています。

HTML

<base target="_blank">
<iframe id="Example2"
    name="Example2"
    title="Example2"
    width="400"
    height="300"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe>

<br>
<small>
  <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a>
</small>

表示結果

表示結果

Live example

注記

仕様

ブラウザ実装状況

[1] referrerpolicy として実装。flag で制御されています (crbug.com/490608)。

[2] referrer として実装。設定 network.http.enablePerElementReferrer で制御されています。Firefox 45 で referrerpolicy に改名しました。

[3] バグ 680823 のため、resize CSS プロパティはこの要素に効果がありません。