IFRAME を使わない方法の補足

phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エン...

phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。

人気エントリーに便乗する感じで。

XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。

iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義 (Transitional、Frameset では定義済み)、XHTML1.1 では廃止されていますので、Strict でコーディングする際に外部オブジェクトを (X)HTML によって読み込むには object を使うことになりますね。

で、object 要素の DTD はどうなっているかというと、(XHTML1.0 Strict

<!ELEMENT object (#PCDATA | param | %block; | form | %inline; | %misc;)*>
<!ATTLIST object
%attrs;
declare (declare) #IMPLIED
classid %URI; #IMPLIED
codebase %URI; #IMPLIED
data %URI; #IMPLIED
type %ContentType; #IMPLIED
codetype %ContentType; #IMPLIED
archive %UriList; #IMPLIED
standby %Text; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
name NMTOKEN #IMPLIED
tabindex %Number; #IMPLIED
>

こんな感じ。また基本的なところですが、object 要素はインライン要素として定義されています。

<!ENTITY % special
"%special.pre; | object | img ">

なので、元ネタのサンプルソース (下記) に補足すると、

<html>
<head>
<title>test</title>
</head>
<body>
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px">
<p>non object</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="/exec/some.html">
<p>non object</p>
</object>
<!--> <![endif]-->
</body>
</html>

まず、object 要素はインライン要素ですから、Strict な (X)HTML でコーディングする場合は、body 要素の直接の子要素として記述することはできず、ブロックレベル要素内で記述しなければなりません。また、「classid」 を指定していますが、サンプルでは読み込んでいるファイルが、HTML 文書ですから、あまり必要はありません。省略してもよいでしょう。

逆に、width、height の両属性を記述しておく方が有益でして、(サンプルではスタイルで指定してありすが) IE 以外のブラウザ用として書かれているサンプルも、width、height を指定してあげれば、問題なく IE で表示されます。

ということで、その辺を考慮して記述するならば、

<p>
<object type="text/html" data="/exec/some.html" width="100" height="100">
object に対応していない場合はこれが表示される
</object>
</p>

って書けば OK。

object 要素は、ブロック要素も内包できるので、p 要素を含みたい場合は、

<div>
<object type="text/html" data="/exec/some.html" width="100" height="100">
<p>object に対応していない場合はこれが表示される</p>
</object>
</div>

って感じに。

ちなみに、object 要素は、iframe 要素だけでなく、img 要素の代わりとかにもなります。こんな感じで。

<p>
<object data="/img/title.png" type="image/png" width="255" height="36">
代替テキスト</object>
</p>

ただ、object のレンダリングは、ブラウザによってマチマチで、なかなかクロスブラウザなコントロールが難しいのが現状。特に IE は無駄にスクロールバーが表示されたりしてダメダメなので、オススメはしないですね。

Social Share