<iframe>〜</iframe>
iframe（アイフレーム）要素は文書内に他のHTML文章を埋め込むことができ、入れ後になったブラウジングコンテキストを表します。
| iframe要素 | 説明 |
|---|---|
| カテゴリー | ・フローコンテンツ ・フレージングコンテンツ ・パルバブルコンテンツ ・エンベッディッドコンテンツ ・インタラクティブコンテンツ |
| コンテンツモデル | ・文章をHTMLとして扱う場合はテキスト ・文章をXMLとして扱う場合は空 |
| 使用できる場所 | エンベッディッドコンテンツが期待される場所 |
iframe要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| src（ソース） | 他のHTML文書のURL | 文書内に埋め込む画像やスクリプト、他のHTML文書を指定する。 |
| srcdoc（ソース・ドキュメント） | Iframe要素で埋め込むHTML文章の内容 | 表示したいHTMLを属性値として直接入力する。 |
| name | 要素に名前を付与する | JavaScriptから要素にアクセスしたり、付与した名前をリンクのターゲットに使用したりする。 |
| sandbox（サンドボックス） | sandobox属性に指定できる値については、下のsandboxに指定できる値を参照ください。 | セキュリティのため制限をかける。 |
| allow（アロー） | Feature Policy （権限ポリシー）を設定 allow属性に指定できる値については、下のallow属性に指定できる値を参照ください。 | ユーザエージェントにおける特定の機能やAPIを有効化、あるいは無効化したり、動作を変更したりすることができる。 |
| allowfullscreen | allow=”fullscreen” | フルスクリーン表示を許可。 |
| width（ウィズ） | 正の整数を指定 | 要素の横幅を指定する。 |
| height（ハイト） | 正の整数を指定 | 要素の高さを指定する。 |
| referrerpolicy（リファラーポリシー） | アクセス元の URL 情報 | リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元のURL情報）を送信するか否か（リファラポリシー）を指定する。 |
| loading | ・lazy：可視状態になるまでリソースの取得を遅延させることをユーザエージェントに指示します。 ・eager：可視状態に関係なく、リソースをすぐに取得する必要があることをユーザエージェントに指示します。 | ユーザエージェントに画像取得のヒントを提供します。img要素、および iframe要素に指定可能で、ブラウザネイティブ実装の遅延読み込み（Lazy loading）を実現する。 |
| 値 | 説明 |
|---|---|
| allow-forms | 埋め込まれた文書からのフォーム送信を有効にします。 |
| allow-modals | 埋め込まれた文書からモーダルウィンドウを開くことを可能にします。 |
| allow-orientation-lock | 埋め込まれた文書が、スクリーンの方向をロック可能にします。 |
| allow-pointer-lock | 埋め込まれた文書がPointer Lock APIを使用可能にします。 |
| allow-popups | 埋め込まれた文書からのポップアップを有効にします。 |
| allow-popups-to-escape-sandbox | sandbox 属性が付与された文書が、新しいウィンドウを開いた時、サンドボックスが継承されないようにします。 |
| allow-presentation | 埋め込まれた文書がプレゼンテーションセッションを開始できるようにします。 |
| allow-same-origin | 埋め込まれた文書を固有のオリジンとはせず、親文書と同じオリジンを持つものとします。 |
| allow-scripts | 埋め込まれた文書からのスクリプト実行を有効にします。 |
| allow-top-navigation | 埋め込まれた文書から別のブラウジング・コンテキストを指しているリンクを有効にします。 |
| allow-top-navigation-by-user-activation | 埋め込まれた文書が最上位のブラウジング・コンテキストに移動できるようにします。ただし、ユーザーの操作によって開始されたものに限ります。 |
| 値 | 説明 |
|---|---|
| autoplay | iframeによって埋め込まれた動画が自動的に再生するようにします。 |
| encrypted-media | Encrypted Media Extensions API（EME / 暗号化メディア拡張） の使用を許可します。 |
| fullscreen | fullscreen APIの使用（フルスクリーン表示）を許可します。 |
| geolocation | Geolocation APIの使用を許可し、ユーザーの位置情報を使用可能にします。 |
| payment | Payment Request APIの使用を許可し、ユーザーに簡単・高速な決済を提供にします。 |
| picture-in-picture | Picture-in-Pictureモードでビデオを再生可能にします。 |
Google Mapを埋め込む
使用例
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25903.21594641203!2d139.49572811911426!3d35.75321358674934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018e63ce601dcb3%3A0x98ca7c4d2454e85f!2z5p2x5Lqs6YO95p2x5LmF55WZ57Gz5biC!5e0!3m2!1sja!2sjp!4v1726703317643!5m2!1sja!2sjp" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>表示