iframe 要素

今回はiframeについて説明します。インラインフレームはHTML内部に更にフレームを内臓しHTMLコンテンツ等のテキストコンテンツを読み込むことを可能とする要素です。

コンテンツモデルはテキストを使用することが取り決めとなっています。

私が使用した例では画面左部にあるナビコンテンツ内にあるはiframeを試用してXMLデータを読み込みメインコンテンツ内に埋め込む形で表示をしています。 XMLデータを使用している理由はお勧め記事メニューをXMLデータを更新することによって即座に変えることができ、更にXSLTとCSSを使用することによってメインコンテンツと代わり映えのない表記を外部コンテンツ読み込みで簡単に表現したかったこと、あとは個人的に試用目的もあります。

XMLデータをiframeで表示させる時の注意点は開始タグと終了タグの間には何も入れないよう注意して下さい。尚、画面の表示がされない場合はブラウザの変更が必要です。私の場合はIE9では表示がされませんでしたが、google chrome,Firefoxの最新バージョンでは確認がとれています。

iframe自体はHTML5になってからの新要素ではありませんが、新たに属性が加わりましたのでその部分を踏まえて書いていこうと思います。その他メインコンテンツに外部コンテンツを埋め込む要素としては　embed要素、object要素がありますが使用法が異なってきますので後日記述致します。

srcコンテンツ 属性

インラインフレームに埋め込むテキストを指定します。コンテンツはテキストを使用します。(html/xml)

srcdocコンテンツ 属性

html5からの新属性です。外部コンテンツを用意しなくてもフレーム内にHTMLコンテンツ等を表示させることが可能です。簡易的にiframeを使用したい場合での活用法となります。

nameコンテンツ 属性

nameコンテンツ属性はリンクターゲットに指定したい場合に使用されます。object要素等でも使用することが可能です。

sandboxコンテンツ 属性

HTML5で新たに追加された新属性でありフレーム内部のリンクターゲット、スクリプトを無効にする属性です。 iframeに組み込まれたスクリプトが勝手に動作して予期せぬバグを起こさないようなセキュリティ強化の目的を持つ属性であり、sandboxがセットされた場合リンクターゲット、スクリプト、フォームを無効にしてしまいます。

sandboxの制限をはずす場合はsandboxに次の指定をする必要があります。

・allow-same-origin:親ドキュメントと同様の扱いとなります。

・allow-forms:フォームのサブミット等が許可されます。

・allow-scripts:スクリプトが許可されます。

frameborderコンテンツ 属性

フレームの外部フレームを表示させるかどうかを指定します。フレームを表示させる場合は"1"を指定し、非表示の場合は"0"を指定します。

表示をさせない場合の例は以下のとおりです。

scrollingコンテンツ 属性

画面をスクロールさせるかどうかを指定します。自動で判断させる場合はauto、スクロールさせる場合はyes、スクロールさせない場合はnoを指定します。

外部コンテンツ-XMLData読み込み例

xmlデータをscrollさせないで埋め込んだiframeは次のようになります。メインコンテンツに外部コンテンツとしてXMLデータを読み込み、XMLデータをXSLTによって整形化しそこに通常のスタイルシートを組み合わせた方式です。

簡易的にXMLなどの外部リソースを読み込む場合に非常に有効な方法です。

HTML5 Element -外部コンテンツ読み込み embed/object

外部コンテンツ-embed要素

次にembed要素、object要素について説明をしていきます。ともに外部リソースを読み込むためのプラグインとして使われる要素ではありますが若干の違いがあり、object要素に関しては開始タグ、終了タグ、ともに必要ですが、embed要素は終了タグを必要としません。

その他大きな違いとして、現在は主流はobject要素が使われるのが一般的のようですがemebed要素はプラグインの要素として使われてきた要素であることから比較的古いブラウザでも動作がされるということです。

その為、作成するホームページの公開対象や仕様によって要素を使い分けをするようがよいようです。

その他FLASH組み込みの場合はembed要素が使われており、次のような記述となりますので例文として記載いたします。

外部コンテンツプラグイン object要素

object要素の使用例を記載します。

今回、外部コンテンツプラグインとしてiframe,embed,objectの3要素を記載いたしましたが、本ページではhtml上でのデータを読み込み程度にしか使用しておりませんので、iframeを使用してデータをXMLデータを読み込んでいます。