ブログに例えばＢＢＳを表示しようとしてインラインフレームを利用する場合、高さが固定であると不便です。
読み込むページによって高さが変わる方法を書き残します。
最近の流れで言うとAjaxを利用するのがトレンドかもしれませんが、ＢＢＳなどのＣＧＩは文字コードがShift_JISの場合がほとんどで、UTF-8へ変換する作業や、リンクの問題とかあってあきらめました。^_^;
私が使っているＢＢＳ のCGI はBBSNOTE です。
先ず、<head>と</head>の間に
<script language="JavaScript">
<!--
function GetHeight(Y)
{
var app = navigator.appName.charAt(0);
if (app == "N")
{
document.getElementById(Y).height = parent.frames['newY'].document.height +20;
}
else
{
document.getElementById(Y).height = parent.frames['newY'].document.body.scrollHeight;
}
}
// -->
</script>
と記入します。
☆少し修正しました。修正版はこちら
IFRAMEの部分は
<iframe src="インラインフレームに表示するURL" onload="GetHeight(this.id)" id="Y" name="newY" height="動作しなっかった場合の高さ、例えば500とか" width="例えば500とか" frameborder="0" marginheight="0" marginwidth="0">
</iframe>
とします。
これで一応高さが可変します。
IE6・IE7・NN7.1・Firefox2.0・Opera7で確認できました。IE5ではうまく動作しませんでした。
Opera9は動作はしますが、正常な動作ではなかったです。
Netscape系は読み込むページによってはスクロールバーが出ました。ですから+20してあります。
scrolling="no" にすると動作しなかった場合まったく見ることが出来ないのでしませんでした。
仮に動作しなかった場合のために、heightも指定しておきました。
ただし、レンタルＢＢＳ等の違うドメインのページはjavascriptでは参照出来ないそうです。
以上です。
これを利用した私のＢＢＳはこちら。
追記：Macでsafari を使う機会があったのですが、正常に動作しました。
safariでは正常に動作しない場合があるそうです。その対処法はこちらのサイトです。
追記： JavaScript の修正
Netscape(Firefox) とその他でプロパティを変更していましたが、プロパティを認知するかどうかで変更するように修正しました。Opera等でNetscapeとブラウザ名を出力された場合に対処しました。
また、こちらのサイトを参考に修正しました。(6/21 再修正)
<script language="JavaScript">
<!--
function GetHeight(ID,NAME)
{
if (document.height)
{
document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;
}
else
{
document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px";
}
}
// -->
</script>
iframeのところは
<iframe src="インラインフレームに表示するURL" onload="GetHeight(this.id,this.name)" id="例えばZ" name="例えばnewZ" width="例えば500" height="例えば500">
</iframe>
とします。
この場合、逆はだめで、つまりif (document.body.scrollHeight) とするとNetscape系も認識出来てしまいます。その場合、動作はしますが、正常な動作ではないです。
また、style.heightと変更しましたが、この場合Netscape系では +"px " は必須です。