Categories: ウェブブラウザ

“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>

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

Recent Posts

移転を計画中?

新たにドメインを取得し、サイト…

4年 ago

iPhone から Android へ乗り換えた

長く使ってきた iPhone …

6年 ago

Chrome の拡張機能がウェブサイトからインストールを中止

ブラウザのアドオン、拡張機能と…

7年 ago

iOS 12 と macOS 10.14 Mojave 対応機種

iOS 12 と macOS …

7年 ago