iframe-html5

HTML5 <iflame>

src属性は、文書内に別の文書をフレーム表示する際に使用します。 src属性の値には、フレーム表示する文書のURLを指定します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性が廃止されています。一方で、新しくsrcdoc属性・sandbox属性・seamless属性が追加されています。

■フレーム表示する内容をsrcdoc属性の値として指定

srcdoc属性は、フレーム表示する内容を属性値として指定する際に使用します。指定する内容の中にダブルクォーテーション（ " ）などの引用符が出てくる場合には"とエスケープします。また、アンパサンド（ & ）が出てくる場合には、&amp;と二重エスケープする必要があります。

src属性とsrcdoc属性を同時に指定した場合には、srcdoc属性が優先されます。 srcdoc属性を使用すれば、インラインフレーム用の別文書を用意する必要が無くなりますが、 srcdoc属性がサポートされていないブラウザを考慮するなら、別文書を用意してsrc属性も指定してやるとアクセシビリティーが高まるでしょう。

■フレーム内コンテンツの表示にsandbox属性で制限を加える

sandbox属性は、悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用します。 sandbox属性を指定すると、そのフレームのコンテンツは出処が別個のものと見なされて、フォーム・スクリプト・他の閲覧コンテンツへのリンク・プラグインが無効となります。

sandbox属性の値として指定できるのは、allow-same-origin・allow-forms・allow-scriptsの３種類です。

allow-same-origin
　　　フレーム内のコンテンツの出処が、親ページと同じものとされる。
allow-forms
　　　フレーム内のコンテンツのフォームを有効にする。
allow-scripts
　　　フレーム内のコンテンツのスクリプトを有効にする。ただし、ポップアップは無効。

以下の使用例では、sandbox属性に３つの値すべてを指定しています。この場合、フレーム内のコンテンツの出処は同じものと見なされ、フォームとスクリプトは有効になります。ただし、ポップアップとプラグインは無効となります。

■<iframe>～</iframe>の内容は何も意味を持たない

HTML4.01では、<iframe>～</iframe>の間には、インラインフレームをサポートしていない環境向けの内容を記述することになっていました。 HTML5では、<iframe>～</iframe>に内容を指定しても、何も意味を持たないことになっています。

ただし、インラインフレームをサポートしていない旧いブラウザでは、<iframe>～</iframe>の内容がアクセシビリティーの向上に役立つでしょう。こうした環境に配慮するなら、<iframe>～</iframe>の中に何らかの内容を含めても良いでしょう。

■属性

src属性
　　　フレーム表示する文書のURLを指定
srcdoc属性
　　　フレーム表示する内容を属性値として指定
name属性
　　　フレーム名を指定
seamless属性
　　　フレーム内のコンテンツを親ページの一部のように表示
sandbox属性
　　　フレーム内のコンテンツの表示に制限を加える（allow-same-origin・allow-forms・allow-scripts）
width属性
　　　フレームの横幅を指定
height属性
　　　フレームの高さを指定

■使用例

HTMLソース
Q．ドラえもんの生年月日は？<br>
<a href="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-a1-html-sample.html" target="sample">A1．2112年3月9日</a><br>
<a href="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-a2-html-sample.html" target="sample">A2．2112年9月3日</a><br>
<a href="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-a3-html-sample.html" target="sample">A3．2211年3月9日</a><br>
<a href="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-a4-html-sample.html" target="sample">A4．2212年9月3日</a><br>
<a href="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-q-html-sample.html" target="sample">ヒント</a><br>
<iframe src="https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/iframe-q-html-sample.html" name="sample" width="200" height="150">
この部分はインラインフレームを使用しています。
</iframe>

↓↓↓

ブラウザ上の表示

"Q．ドラえもんの生年月日は？"
A1．2112年3月9日
A2．2112年9月3日
A3．2211年3月9日
A4．2212年9月3日
ヒント