WipeWrite PB iTunes App Store

"object" タグと"条件付きコメント"を使用したクロスブラウザなインラインフレーム表示

Google マップをウェブページに埋め込んだりと、思いの外、重宝されている HTML タグの "iframe" ですが、XHTML1.1 では "iframe" タグは廃止されています。代わりに XHTML1.1 では、インラインフレームでコンテンツを埋め込む為に "object" タグを使用します。
しかし、"object" タグを使用すると、Internet Explorer で埋め込んだコンテンツが表示されない場合があります。

XHTML1.1 で定義した html に、iframe タグを使用したら表示されないのかと言うと、XHTML Validation はされませんが表示はされます。

そこで、Validation しつつ、XHTML1.1 で object タグを使用し、尚かつ IE でもインラインフレーム表示させる方法として、よく使用されるのが "条件付きコメント" で、ブラウザが "IE の場合" と "IE ではない場合" で読み込むコードを分岐させてる方法です。

サンプル:

<!--[if IE]>
<iframe src="url">non data</iframe>
<![endif]-->
<!--[if !IE]><-->
<object data="url">non data</object>
<!--><![endif]-->

サンプルを見て頂くと
"<!--[if IE]>" で IE の場合には iframe タグで表示し、"<!--[if !IE]>" で IE でない場合には object タグで表示する。と言う具合になっています。

色々と調べた結果、上記ようなサンプルに行き着き、これを見てふと思ったのですが、iframe タグも object タグも、未対応ブラウザで表示した場合、開始タグ <〜> と終了タグ </〜> に囲まれた部分をコメント表示するのは同じなのではないかと。

だったら、object タグに入れ子で iframe タグを書いて、それだと Validation されないので条件付きコメントで括えば、object タグに対応したブラウザであれば object を表示し、IE の場合には、object 未対応のコメントで iframe を表示する。

そんな感じで書いたのが、以下のサンプルです。

<object data="url.html">
<!--[if IE]>
<iframe src="url.html">No Frame</iframe>
<![endif]-->
</object>

もし、これを見て、無理矢理じゃない?とか、何か想定される不都合にお気付きになった方がいらしたら、コメントお願いします。

Blog : BLOG / Posted : 2009.03.25

Browser Recent Entries

Post Comment

匿名でコメントする事もできます。


画像の中に見える文字を入力してください。

iOS App