<iframe>…… インラインフレームを作る
<iframe>タグは、インラインフレームを作る際に使用します。インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。
src属性は、文書内に別の文書をフレーム表示する際に使用します。src属性の値には、フレーム表示する文書のURLを指定します。
■HTML4.01からHTML5へのバージョンアップによる変更点
HTML5では、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性が廃止されています。一方で、新しくsrcdoc属性・sandbox属性・seamless属性が追加されています。
■フレーム表示する内容をsrcdoc属性の値として指定
srcdoc属性は、フレーム表示する内容を属性値として指定する際に使用します。指定する内容の中にダブルクォーテーション（ " ）などの引用符が出てくる場合には"とエスケープします。また、アンパサンド（ & ）が出てくる場合には、&amp;と二重エスケープする必要があります。
src属性とsrcdoc属性を同時に指定した場合には、srcdoc属性が優先されます。srcdoc属性を使用すれば、インラインフレーム用の別文書を用意する必要が無くなりますが、srcdoc属性がサポートされていないブラウザを考慮するなら、別文書を用意してsrc属性も指定してやるとアクセシビリティーが高まるでしょう。
[html]
<iframe srcdoc="<p>フレーム表示される内容です。詳しくは、<a href="http://xxxxx.xxx/?p=1&amp;r=1">こちらのページ</a>をご確認ください。</p>" src="http://xxxxx.xxx/"></iframe>
[/html]
■フレーム内コンテンツの表示にsandbox属性で制限を加える
sandbox属性は、悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用します。sandbox属性を指定すると、そのフレームのコンテンツは出処が別個のものと見なされて、フォーム・スクリプト・他の閲覧コンテンツへのリンク・プラグインが無効となります。
sandbox属性の値として指定できるのは、allow-same-origin・allow-forms・allow-scriptsの３種類です。
- allow-same-origin
- フレーム内のコンテンツの出処が、親ページと同じものとされる。
- allow-forms
- フレーム内のコンテンツのフォームを有効にする。
- allow-scripts
- フレーム内のコンテンツのスクリプトを有効にする。ただし、ポップアップは無効。
以下の使用例では、sandbox属性に３つの値すべてを指定しています。この場合、フレーム内のコンテンツの出処は同じものと見なされ、フォームとスクリプトは有効になります。ただし、ポップアップとプラグインは無効となります。
[html]
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://example.com/"></iframe>
[/html]
■seamless属性を指定すると、親ページの一部のように表示させられる
seamless属性は、フレーム内のコンテンツを、あたかも親ページの一部のように表示させる際に使用します。サポートされたブラウザでは、それがフレームかどうか一見しただけでは分からないような境界線の無い表示になると思われます。
逆に言えば、seamless属性が無ければインラインフレームには境界線が表示されるということになるのかもしれません。
（HTML5ではframeborder属性が廃止されているので）
■<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属性
- フレームの高さを指定
■HTML5での使用例
[html]
<article>
<footer><a href="/users/ch">編集長</a> <time pubdate>2009-08-21T23:35Z</time></footer><br>
<iframe seamless sandbox="allow-same-origin" srcdoc="<p>表紙の写真はもう決まった?</p>"></iframe>
</article>
[/html]
