<iframe>
<iframe> は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに別のページを埋め込むことができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML 属性 | ||||||
height | 1 | 12 | 1 | 3 | 18 | 2 |
name | 1 | 12 | 1 | 3 | 18 | 2 |
src | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
width | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| HTMLIFrameElement インターフェイスは、（継承によって使用できる通常の HTMLElement インターフェイスのものに加えて）インラインフレーム要素を操作するための特別なプロパティを提供します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| iframe とその iframe の親文書が同一オリジンであった場合、Document（すなわち、インラインフレーム内の閲覧コンテキスト内にあるアクティブな文書）を返します。そうでなければ null を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| contentWindow プロパティは、HTMLIFrameElement が所属する Window オブジェクトを返します。この Window オブジェクトを使用して、iframe の文書や内部 DOM にアクセスすることができます。この属性は読み取り専用ですが、グローバルの Window オブジェクトのように操作することができます。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLIFrameElement インターフェースの getSVGDocument() メソッドは埋め込まれた SVG の Document オブジェクトを返す。 | 1 | 12 | 3.5 | 3.1 | 18 | 2 |
| height は HTMLIFrameElement インターフェイスのプロパティで、この iframe 要素の height 属性を反映し、フレームの高さを CSS ピクセル数で示す文字列を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| name は HTMLIFrameElement インターフェイスプロパティで、iframe 要素の name 属性を反映し、 要素の固有の名前を示す文字列値です。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLIFrameElement.src プロパティは文字列で、HTML の src 属性を反映し、埋め込まれるコンテンツのアドレスを保持します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| width は HTMLIFrameElement インターフェイスのプロパティで、この iframe 要素の width 属性を反映し、フレームの幅を CSS ピクセル数で示す文字列を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
- バグ680823のため、`resize` CSSプロパティはこの要素に影響しません。
- Safariには、ページに追加されたときに `iframe` 要素が非表示になっていると、iframeが読み込まれないというバグがあります。iframeElement.src = iframeElement.src`とするとiframeが読み込まれるはずです。
- iOSのSafariには、ページに追加されたときに`iframe`要素が非表示になっていると、iframeが読み込まれないというバグがある。iframeElement.src = iframeElement.src`とするとiframeが読み込まれるはずです。
基本構文
<iframe src="https://example.com"
width="600" height="400"
title="外部コンテンツ"
loading="lazy"
sandbox="allow-scripts allow-same-origin">
</iframe>ライブデモ
Title attribute. heavymain
Iframe to is title attribute in content. Description provide(akseshiriti).
実務での使いどころ
-
<iframe> の活用
<iframe> は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに別のページを埋め込むことができます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。