May 1st,2015
＃
“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="index.html" target="_top">トップへ戻る</a></p></body></html>"></iframe>
