HTML <iframe>タグ


インラインフレームは次のようにマークアップされます。

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

以下の「自分で試してみてください」の例をもっと見てください。


定義と使用法

タグは<iframe>インラインフレームを指定します。

インラインフレームは、現在のHTMLドキュメント内に別のドキュメントを埋め込むために使用されます。

ヒント: CSSを使用してスタイルを設定します<iframe> (以下の例を参照)。 

ヒント:のタイトル属性を常に含めることをお勧めします<iframe>これは、スクリーンリーダーがコンテンツの内容を読み取るために使用します<iframe>


ブラウザのサポート

Element
<iframe> Yes Yes Yes Yes Yes

属性

Attribute Value Description
allow   Specifies a feature policy for the <iframe>
allowfullscreen true
false
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest true
false
Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
height pixels Specifies the height of an <iframe>. Default height is 150 pixels
loading eager
lazy
Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
name text Specifies the name of an <iframe>
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
Specifies which referrer information to send when fetching the iframe
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Enables an extra set of restrictions for the content in an <iframe>
src URL Specifies the address of the document to embed in the <iframe>
srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe>
width pixels Specifies the width of an <iframe>. Default width is 300 pixels


グローバル属性

この<iframe>タグは、HTMLのグローバル属性もサポートしています。


イベント属性

この<iframe>タグは、HTMLのイベント属性もサポートしています。


その他の例

iframeの境界線を追加および削除します(CSSを使用)。

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

関連ページ

HTMLチュートリアル:HTML Iframe

HTML DOMリファレンス:IFrameオブジェクト


デフォルトのCSS設定

ほとんどのブラウザは<iframe>、次のデフォルト値で要素を表示します。

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}