Home > iframe

2008.04.13

iframe要素をobject要素に置き換える

XHTML 1.0 Strictではiframe要素は「非推奨要素・属性」とされていてValidになりません。
しかもGoogle my mapでは貼付け用のコードはiframe要素を使用して提供されています。

<iframe src="http://表示するサイトのhtml" title="参照ページ"width="300" height="300">参照ページ</iframe>

これをobject要素を使用して表示する場合は

<object data="http://表示するサイトのhtml" width="300" height="200">参照ページ</object>

のようにします。

なお、このページでは画像周囲に囲みの線をつけるためにstyle.css に以下の様に「object1」というクラスセレクタを記述し

/* おぶじぇくと*/
.object1 {
border: solid 1px #808080;/*おぶじぇくとに囲み罫を付ける。*/
}

HTMLでは以下のように記述しています。

<object class="object1" data="http://ja.wapedia.mobi" type="text/html" width="180" height="300">Wapedia</object>
Wapedia

携帯用のサイトにWapedia(ワペディア)というモバイル版のサイトがありますがこれをobject要素を使用して表示してみます。

Google my map
を貼付ける場合は背景が白と言う事は無いのでこのobject1」というクラスセレクタは使用していません。

参考:非推奨要素の代替方法(2)
参考:様々な形式のデータを埋め込む
参考:MIMEタイプ

2008.04.12

google my map

googleマイマップで作成した地図のコードはiframeタグで提供されます。
しかし、XHTML 1.0 StrictやXHTML 1.1では「非推奨要素・属性」とされvalidになりません。

Google Mapsのマイマップで取得した以下コードの赤い部分をコピーし

<iframe width="500" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;s=AARTsJqaOi8Q3_GXqleVozq3OuYGVER_wQ&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

以下のobject コードの青い部分に張り付けます。
ピンクの部分はiframeタグがobjectタグに変わった部分です。
objectタグでは 等価な内容名を示す必要があります。

<object width="500" height="350" data="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;s=AARTsJqaOi8Q3_GXqleVozq3OuYGVER_wQ&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;output=embed" type="text/javascript" >等価な内容名</object>
<small><a href="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

等価な内容名
これでXHTML 1.0 StrictでもValidになります。

2008.04.10

iframeの代替タグでテキストを埋め込む

XHTML 1.0 StrictやXHTML1.1ではiframeタグは廃止されており、使用することはできないのですね。
WordPressの多くのテーマはXHTML 1.0 Transitionalなのでiframeタグを使用していました、でも小粋空間さんのテーマkoikikukan3 ではせっかくXHTML 1.0 Strictで提供して下さっています。
XHTML 1.0 Strictでvalidにiframeの動作を実現するには

iframe要素を使わずに擬似的なインラインフレームのを作成する」を参考にさせていただきました。

style.cssに以下を記述

.logbox{
border: solid 1px #808080;
width: 450px;
height: 150px;
padding: 0.5em;
overflow: auto;
}
q {color: #003366; }/*短い引用テキスト*/

投稿記事を以下の様にdivでくくって投稿

<div class="logbox">投稿記事</div>

これで、iframeを使った場合と同じような表示がXHTML 1.0 Strictでvalidに実現できました。(以下、適当な文章をlogboxでくくってみた、さんぷるです。)

長い文章やコード等を書き込みたいときにはiframeは省スペースに役立ちとてもたすかっていました。
XHTMLではiframeタグは非推奨要素とされているのでともかくこういう方法が見つかりValidに出来るんです、良かった!良かった!。
ではこのスペースにGoogleMapsなどの場合のように他で作成したWebページをはめ込みたい場合はどんな書き方があるのでしょう?
安直に聞ける人が居れば助かるのですが、僕の年じゃあきびしいみたいです。
どんな記事でも自由に書きたいというのは結構大変な事ですね!。