IFRAMEでのリンク先のファイルに応じた高さ調整

ソースコードをIFRAMEで貼ることにしましたが、IFRAMEで縦方向のスクロールバーが出てしまうと、かっこ悪いし操作性も悪い。

なんで、自動的に高さを調整するためにJavaScriptを仕込みました。

ここの方のエントリーを参考に、ちょっと自分向けに改造。

どうもSafariでうまく動かないようなので、Safari用の対処コードを追加。

<script language="JavaScript">
<!--
function GetHeight(Y,NAME)
{
    var app = navigator.appName.charAt(0);
    if(navigator.userAgent.indexOf('Safari') != -1){
        document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80;
    }else if (app == "N")
    {
        document.getElementById(Y).height = parent.frames[NAME].document.height +80;
    }
    else
    {
        document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80;
    }
}
// -->
</script>

IFRAMEの呼び出しの方は、

<iframe src="./untitled.as.html" onload="GetHeight(this.id,this.name)" id="Z" name="newZ" height="50" width="430" frameborder="1" marginheight="0" marginwidth="0">
</iframe>

こんな感じ。

Opera、Safariだと、リンク先のHTMLの縦方向が小さい時、iframeのheightの数値の決めうちで書いてる数値が採用されてしまうようなので、heightの値を小さめに。

これで、縦方向に綺麗にコードが出るようになって良かった良かった。