JavaScript ウインドウを開いたとき<IFRAME>の大きさをウインドウにあわせる。

<IFRAME>を設定すると、大きさが固定してしまい、
ウインドウが大きい状態でも<IFRAME>の大きさは変わらない。
ウインドウにあわせて<IFRAME>の大きさを変える。

・ウインドウを開いたとき<IFRAME>の大きさをウインドウにあわせる。

ウインドウを開いたとき<IFRAME>で表示している内容も大きくしたくなった。
ウインドウの大きさの値を取得し、<IFRAME>の幅、高さをJavaScriptで変更することとした。

<html>
<head>
<title>CGI自動実行プログラム</title>
<script language="JavaScript"><!--
function size1()
{

w=document.body.clientWidth+24;
h=document.body.clientHeight+128;
obj = document.getElementById("myframe1");
obj.style.width = w - 50 + "px";
obj.style.height = h + "px";
document.myframe1.width=w;
document.myframe1.height=h;
}

//--></script>

</head>

<body onLoad="size1()">

<iframe src='./cgi-bin/kensakuhyouji.cgi' id='myframe1' width=800 height=800></iframe>


</body>
</html>

document.body.clientWidth、h=document.body.clientHeightでウインドウのサイズを取得する。
実際のウインドウのサイズとちょっと異なるので+24とか+128で微調整する。

obj = document.getElementById("myframe1");でid=myframe1と設定した<IFRAME>の情報をobjに取得。

obj.style.width、obj.style.heightを設定することにより、<IFRAME>のwidth、heightを自由に変更できる。

なかなかナイスな関数です!!



ソース公開フリーソフト集TOP