メモ帳

ブログに例えばＢＢＳを表示しようとしてインラインフレームを利用する場合、高さが固定であると不便です。
読み込むページによって高さが変わる方法を書き残します。
最近の流れで言うとAjaxを利用するのがトレンドかもしれませんが、ＢＢＳなどのＣＧＩは文字コードがShift_JISの場合がほとんどで、UTF-8へ変換する作業や、リンクの問題とかあってあきらめました。^_^;
私が使っているＢＢＳ のCGI はBBSNOTE です。

最近になって、やっとRSSとかフィードとか言う言葉に関心が湧いてきて、
RSSリーダーなるものをちょこっと使ってみました。
調べると、いろんな種類があるんですね。
どれを選べば良いか迷ってしまいます。
で、取り敢えず使ってみたのが、ブラウザのプラグインで利用するやつです。
ブラウザはFirefox2でプラグインはsageです。
開いたところは、こんな感じです。

<iframe>タグの代わりに<object>タグが使えるそうです。
参考：IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法
XHTMLではiframeタグは禁止される方向なのでValidにしたい場合はこっちを使ったほうがよいらしいです。ということだそうです。
ただ、先日書いた　IFRAMEの高さ可変　のようにOBJECTタグでも読み込むページによって高さを変えることが出来るかどうか試してみました。実験的エントリーです。
参考：JavaScript クロスブラウザに関するメモ

先ず、IFRAMEの高さ可変で使ったJavaScriptが使えるかどうか。
予想外ですが、Netscape7とFirefox1.5及び2でそのまま使うことが出来ました。
Opera7とOpera9(一応)はparent.frames[ ]の部分を、
document.getElementById( ).contentDocumentに変更することで動作しました。
しかし、Netscape系は何故かcontentDocumentを認識するものの動作しませんでした。
で、肝心のIE系ですが、私のスキルでは解決出来ませんでした。だからお終いでは進展がないので、ここまでのことを記録しておきます。

追記：Safariではうまく動作しませんでした。以下青字の部分はsafari用の修正です。

JavaScriptの部分 (iframe:object共通)

<script type="text/javascript">
<!--
function GetHeight(ID,NAME)
{
var gEBI = document.getElementById(ID) ;
if (navigator.userAgent.indexOf('Safari') != -1)
{
// SafariのIFRAME用：OBJECTは動作せず(Windows版Safariでは動作しました。)
gEBI.style.height = parent.frames[NAME].document.body.scrollHeight + 20 +"px" ;
}
else if (gEBI.contentDocument)
{
if (document.height)
{
// Netscape及びFirefox
gEBI.style.height = parent.frames[NAME].document.height +20 + "px" ;
}
else
{
// Opera及びSafari(未確認)
gEBI.style.height = gEBI.contentDocument.document.body.scrollHeight +20 +"px" ;
}
}
else
{
// IEのIFRAME用：OBJECTでは動作せず
gEBI.style.height = gEBI.contentWindow.document.body.scrollHeight +20 +"px";
}
}
//-->
</script>

次に、サンプルです。Opera9では、サイズ縮小しません。（もしかするとSafariも？未確認）Safari419も縮小しません。
先ず、その１：IFRAME
問題    解答

ソース

<iframe src="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="frameid01" name="framename01">
</iframe>

その２：OBJECTのサンプル　IE系では動作しません。Opera9も例のごとく縮小しません。Safariは動作しません? 保留
問題  解答

ソース

<object data="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="objectid01" name="objectname01" type="text/html">
</object>

その３：IFRAMEとOBJECTの選択式サンプル　Safariは保留中
問題  解答

ソース

<!--[if IE]>
<iframe src="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="IOid01" name="IOname01" >
</iframe>
<![endif]-->
<!--[if !IE]> <-->
<object data="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id=IOid01" name="IOname01" type="text/html">
</object>
<!--> <![endif]-->

実際問題として、IEで動作しない２番目は使用できないでしょう。
１番か３番となるのですが、どうせIFRAMEを使うのなら、無難な１番ということでしょうか。
Safariでも動作しない？ので、IFRAMEで良いかと思います。その場合は、IFRAMEの高さ可変 で書いたJavaScript が良いと思います。
IEでの方法がわかる方、コメントかトラックバックして下さい。
よろしくお願いします。