服を買った！
何軒も服屋めぐったけど欲しいのなかった。
帰ってメルカリのぞいたら、おしゃれ過ぎるブルゾンが！
誰にも買われたくない。まっしぐらで即購入！
<iframe>タグは、フレームを表す際に使用します。
iframe要素のsrc属性は、フレーム内に表示されるコンテンツのアドレスを指定します。
src属性が存在する場合、その値には有効なURLを指定します。
src属性の値に空文字は指定できません。
iframe要素の子孫は何も表しませんが、
iframe要素をサポートしていない環境向けのフォールバックコンテンツとして機能します。
現在のHTML標準では、過去の仕様にあったframe要素、frameset要素、noframes要素は廃止されています。
これらの要素の代わりに、iframe要素を使用することが推奨されています。
以下は、典型的なiframe要素の使用例です。
iframe要素のwidth属性とheight属性で横幅と高さを指定して、フレーム内コンテンツとして広告を表示しています。
<iframe src="https://ads.example.com/?customerid=923513721&format=banner" width="468" height="60"></iframe> キーワードを複数指定する場合には、ホワイトスペース区切りで記述します。
ただし、 allow-top-navigation と allow-top-navigation-by-user-activation を同時に指定することはできません。
この場合、allow-top-navigation のみ有効となります。
また、allow-top-navigation または allow-popups が指定されている場合は、
allow-top-navigation-to-custom-protocols を同時に指定することはできません。
srcdoc属性は、フレーム内コンテンツとなるドキュメント内容を指定します。
srcdoc属性とsrc属性を同時に指定するとsrcdoc属性が優先されます。
src属性を同時に指定しておくことで、
srcdoc属性をサポートしていないユーザーエージェントにフォールバックURLを提供できます。
以下のサンプルは、ブログへのコメントをiframe要素にして、srcdoc属性の値にコメント内容を指定しています。
また、コメントにスクリプトをインジェクションされても無効化されるように、sandbox属性を指定しています。
<article>
<h1>服を買った！</h1>
<p>
何軒も服屋めぐったけど欲しいのなかった。
帰ってメルカリのぞいたら、おしゃれ過ぎるブルゾンが！
誰にも買われたくない。まっしぐらで即購入！
</p>
<footer>
<p>1時間前、ブチ さんのブログ更新
</footer>
<article>
<footer>13分前、ミケ さんのコメント: </footer>
<iframe sandbox srcdoc="<p>どんなの？"></iframe>
</article>
<article>
<footer>9分前、ブチ さんのコメント: </footer>
<iframe sandbox srcdoc="<p>白と黒のブチ模様"></iframe>
</article>
<article>
<footer>5分前、ミケ さんのコメント: </footer>
<iframe sandbox srcdoc="<p>こんど着てきてよ！"></iframe>
</article>
</article>
何軒も服屋めぐったけど欲しいのなかった。
帰ってメルカリのぞいたら、おしゃれ過ぎるブルゾンが！
誰にも買われたくない。まっしぐらで即購入！
sandbox属性は、iframe要素のコンテンツのセキュリティルールを指定します。
sandbox属性を指定すると、コンテンツがサンドボックス化されます。
コンテンツは強制的に一意のオリジンに設定され、
フォーム、スクリプト、様々なAPIなどを無効化して、他のターゲットへの横断リンクを防止します。
sandbox属性の値に複数のキーワードを指定する場合には、ホワイトスペース区切りで記述します。
例えば、サンドボックス化されたコンテンツ内で
alert()、confirm()、prompt()によるダイアログを使用するには、
allow-modalsとallow-same-originの両方を指定する必要があります。
allow-modalsを指定することで、モーダルダイアログが許可されます。
allow-same-originを指定することで、同じオリジンとしてコンテンツが許可されます。
allow-same-originを指定しなければ、クロスオリジン扱いとなってダイアログを表示できません。
以下のサンプルでは、iframe要素で別のドメインのページを埋め込んでいます。
未知のコンテンツには問題を起こすスクリプトなどが含まれている可能性があるため、iframe要素にsandbox属性を指定しています。
sandbox属性を指定することで、埋め込まれたページではスクリプト、プラグイン、フォームなどが無効になります。
さらに、埋め込まれたページから他のフレームやウィンドウを操作できなくなります。
<iframe sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
allow属性は、iframeのコンテンツに適用されるアクセス許可ポリシーを指定します。
値にはgeolocationやfullscreenなどが指定できるようです。
以下のサンプルは、iframe要素で地図サービスを埋め込んでいます。
地理位置情報は、異なるオリジンのフレームではデフォルトで無効になっています。
埋め込まれたフレーム内で Geolocation API を有効にするために、allow属性の値にgeolocationを指定しています。
<iframe src="https://maps.example.com/" allow="geolocation"></iframe>
allowfullscreen属性は、iframeのコンテンツで requestFullscreen() を使用できるようにするかどうかを指定します。
allowfullscreen属性を指定すると、iframeのコンテンツがどのオリジンであってもフルスクリーン機能を使用できるように許可します。
以下のサンプルは、iframe要素で動画ページを埋め込んでいます。
フレーム内のプレーヤーが動画を全画面表示できるようにするには、allowfullscreen属性の指定が必要です。
<iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>referrerpolicy属性は、要素によって開始されるフェッチのリファラーポリシーを指定します。
loading属性は、読み込みの延期を決定するときに使用されます。
loading属性を使用すると、ビューポートの外にあるiframe要素の読み込みを遅延させるかどうかを指定できます。
itemprop属性は、アイテムのプロパティを指定するグローバル属性ですが、
iframe要素にitemprop属性を指定する場合には、同時にsrc属性を指定する必要があります。