iframe要素は他のHTML文書を埋め込む【HTML】

iframe要素はインラインフレーム（Inline Frame）の略で、入れ子になったブラウジングコンテキストを表し、他のHTML文書などを埋め込むことができます。

ちなみにブラウジングコンテキストとは、ウィンドウとかタブなどWebページを表示する環境のことです。

iframe要素で使える属性

iframe要素では以下のような属性を指定できます。

src（ソース）
srcdoc（ソース・ドキュメント）
name（ネーム）
seamless（シームレス）
sandbox（サンドボックス）
width（ウィズ）・height（ハイト）

src（ソース）

src属性で埋め込むHTMLファイルのURLを指定します。

srcdoc（ソース・ドキュメント）

srcdoc属性では、埋め込むHTMLファイルの内容を値として直接記述します。

記述するのはbody要素の内容のみでOKですが、「”」や「&」などは特殊文字に変換して記述する必要があります。

もしsrc属性とsrcdoc属性が両方指定されている場合は、srcdoc属性の内容の方が優先して読み込まれます。

name（ネーム）

name属性は埋め込む文書に名前をつけるためのもの。

このname属性を指定することで、JavaScriptなどでアクセスしたりリンクのターゲットに使用したりということができます。

seamless（シームレス）

seamless属性を指定した場合、親文書の一部かのように埋め込まれます。

どういうことかというと、通常はiframe内に読み込まれたコンテンツ内のリンクを開く場合は、iframe内で展開されるのですが、seamless属性を指定すると、親文書上のリンクとして開くようになります。

また、seamless属性では、親文書で指定したスタイルがiframe内の要素にも継承して適用されるようになりました。

iframe要素がシームレスモードで動作するのは以下の条件を満たすときです。

seamless属性が指定され、sandbox属性が指定されていない場合
埋め込まれる文書が親文書と同一オリジンを持つか、srcdoc属性で指定した文書の場合

ちなみにseamless属性は値を必要としない論理属性です。

sandbox（サンドボックス）

seamless属性の値が空で指定されたiframe要素によってHTMLを埋め込む場合、以下のような制限がかかってしまいます。

埋め込まれた文書は、固有のオリジン（URLスキーム、ホストおよびポートの組み合わせ）を持つものとして扱われる
埋め込まれた文書からのフォーム送信とスクリプトの実行は無効
埋め込まれた文書から別のブラウジングコンテキストを指すリンクは無効

sandbox属性で以下のような値を指定することで、これらの制限をコントロールすることができます。

また、値は半角スペースで区切り、複数指定することもできます。

allow-same-origin

埋め込まれた文書を固有のオリジン（URLスキーム、ホストおよびポートの組み合わせ）とはせずに、親文書と同じオリジンを持つものとする

allow-top-navigation

埋め込まれた文書から別のブラウジングコンテキストを指すリンクを有効にする

allow-forms

埋め込まれた文書からのフォーム送信を有効にする

allow-scripts

埋め込まれた文書からのスクリプトの実行を有効にする

allows-popups

埋め込まれた文書からのポップアップを有効にする

width（ウィズ）・height（ハイト）

widthとheight属性で埋め込むHTML文書の幅と高さを指定することができます。

指定できる値は正の整数です。