このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

iframe”要素~“srcdoc”属性HTML5で追加

記事May 1st,2015
July 7th,2020
埋め込むHTML文書の内容を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

srcdoc”属性について

srcdoc”属性はiframe”要素で埋め込むHTML文書の内容を直接記述するための属性です。

srcdoc”属性とsrc”属性が両方指定されている場合は“srcdoc”属性が優先されます。ただし、“srcdoc”属性に対応していないブラウザではsrc”属性で指定した文書が埋め込まれます。

指定できる値

属性値 説明
HTMLコード 埋め込むHTML文書の内容

srcdoc”属性に記述するHTML文書

埋め込まれる文書は通常のHTML文書と同様に以下の順番で記述します。

srcdoc”属性に記述されるHTML文書はHTMLの属性値が含むことができる文字についての制約を満たす必要がある以外は通常のHTML文書とほとんど同じように記述できます。ただし、“srcdoc”属性に記述するHTML文書には文字エンコーディングを指定するmeta”要素を配置してはいけません。

DOCTYPE宣言title”要素は“srcdoc”属性に記述するHTML文書では任意であり、html”要素head”要素body”要素も通常の条件で省略が可能であるので、body”要素の内容のみを記述することもできます。

また、任意でコメントを含むことができます。

なお、DOCTYPE宣言html”要素head”要素title”要素body”要素の開始タグと終了タグは省略可能なのでbody”要素の内容のみを記述することもできます。

サンプルコード

body”要素の内容のみ記述した場合

<iframe srcdoc="<h1>バナナの木</h1><p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p><p><a href='index.html' target='_top'>トップへ戻る</a></p>"></iframe>

属性値は改行が許されているので通常のHTML文書を記述する場合と同様改行できます。

<iframe srcdoc="
<h1>バナナの木</h1>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
<p><a href='index.html' target='_top'>トップへ戻る</a></p>
"></iframe>

省略せずに記述した場合

<iframe srcdoc="<!DOCTYPE html><html><head><title>バナナの木</title></head><body><h1>バナナの木</h1><p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p><p><a href=&quot;index.html&quot; target=&quot;_top&quot;>トップへ戻る</a></p></body></html>"></iframe>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク