HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

アイフレーム

iframe要素

ブラウジングコンテキストの入れ子を表現する際に使用され、現在表示しているページに別HTMLを表示することができます。

サンプルコード

<iframe src="another.html" width="600" height="400"></iframe>
  • カテゴリー

    フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ

  • コンテンツモデル

    要件に準拠したテキスト

  • 使用ケース

    埋め込みコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

src

読み込むリソースのURLを指定します。

srcdoc

読み込むリソースの内容(HTML)を、属性値として指定する場合に使用します。記号の扱いに関しては注意する必要があり、「"」は「&quot;」、「&」は「&amp;」と置き換えるようにします。src属性も指定されている場合、こちらの属性が優先されます。

name

埋め込むリソースに名前を指定します。

sandbox

読み込むリソースの各動作に対する制御を指定します。半角スペースで区切ることで、複数指定することも可能です。

  • allow-same-origin

    読み込まれたリソースを固有のオリジンではなく、親ページと同じオリジンを持つものとする。

  • allow-top-navigation

    読み込まれたリソースの別ブラウジングコンテキストを指すリンクを有効にする。

  • allow-forms

    読み込まれたリソースのフォーム送信を有効にする。

  • allow-popups

    読み込まれたリソースからのポップアップ表示を有効にする。

  • allow-scripts

    読み込まれたリソースからのクライアントサイドスクリプト実行を有効にする。

seamless

読み込むリソースの扱いを指定します。こちらの要素を指定すると、親ページ(読み込みを行ったページ)のスタイルを適用したり、読み込むリソースにあるリンクを親ページからのリンクとすることができます。ただし、sandbox属性が指定されていないこと、そして読み込むリソースと親ページが同じオリジンを持つか、srcdoc属性を指定している場合に限ります。論理属性です。

width

要素の幅を指定します。

height

要素の高さを指定します。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。