サブウィンドウのリサイズ
これまでのところでは、サブウィンドウを「開く段階」でウィンドウサイズを指定していました。 このページでは、サブウィンドウを「開いた後」にリサイズする方法について考えます。
別窓を開く関数
まずはリサイズさせる別ウィンドウを開く関数を作ります。 HTMLのヘッダーに以下のように記入して下さい。 320×240ピクセルのウィンドウを画面左上に表示します。
<script type="text/javascript">
<!--
function WinOpen()
{
window.open("winresize.html","subwin",
"width=320,height=240,left=0,top=0");
}
// -->
</script>
そしてBODY内でWinOpen()関数を呼び出します。たまにはAタグを使って呼び出してみます。
<a href="javascript:WinOpen()">サンプル</a>
これで準備完了です。
別ウィンドウをリサイズする
次に別窓で表示するページを作ります。 上の関数WinOpen()では、winresize.htmlを開くようにしていますので、 そのファイル名でHTMLファイルを作成してください。 そしてヘッダーに以下のように記入します。
<script type="text/javascript"> <!-- //ウィンドウを相対的にリサイズ function ReSize1(yoko,tate){ resizeBy(yoko,tate); } //ウィンドウを指定サイズに変更 function ReSize2(yoko,tate){ resizeTo(yoko,tate); } // --> </script>
関数ReSize1()は、ウィンドウを相対的にリサイズさせ、 関数ReSize2()は、ウィンドウを指定サイズにリサイズします。 相対指定の場合はresizeBy()を、 絶対指定（指定サイズ）の場合はresizeTo()を使います。 前頁のmoveBy(),moveTo()の時と同じく、「B」と「T」が大文字なので気を付けて下さい。
相対サイズ：resizeBy(横の変更幅,縦の変更幅)
指定サイズ：resizeTo(横のサイズ,縦のサイズ)
各関数には引数が２つありますが、 それぞれ横・縦の変更幅orサイズを柔軟に指定てきるようにしています。
最後に、winresize.htmlのBODY内で関数ReSize1()，関数ReSize2()を呼び出します。 ここでもAタグを使ってみます。
<a href="javascript:ReSize1(10,0)">横伸</a><br> <a href="javascript:ReSize1(0,10)">縦伸</a><br> <a href="javascript:ReSize1(-10,0)">横縮</a><br> <a href="javascript:ReSize1(0,-10)">縦縮</a><br> <br> <a href="javascript:ReSize2(320,240)">指定サイズ</a><br>
縦横の伸縮リンクをクリックすると、各方向に10ピクセルずつ伸縮します。 指定サイズをクリックすると、320×240のサイズになります。
この指定サイズは元のウィンドウと同じ320×240ピクセルに設定していますが、 実際にクリックしてみるとさらに縮まることが分かります。 つまり、window.open()で指定した場合、ウィンドウの表示部分（BODY部分）のサイズを指定でき、 resizeTo()で指定した場合はウィンドウそのもののサイズを指定するようです。
このリサイズ機能も前項のmoveBy()やmoveTo()と同じくメインウィンドウでも使えます。 ただしメインウィンドウを勝手にリサイズされると怒る人もいるので、 絶対に止めましょう！
次のページでは、親ウィンドウの情報をサブウィンドウに伝える方法について解説します。