第49回 「サブウィンドウを制御する」


 今回は開かれたサブウィンドウを制御する方法(表示位置制御、表示サイズ制御)について説明します。
 今まではサブウィンドウを開くときに以下のようにしていました。
 
window.open("sub.html","sub","width=320,height=240");

 単に開くだけであればこれでも十分ですが、JavaScriptで開かれたサブウィンドウを制御するには以下のようにサブウィンドウへの参照を変数に入れておく必要があります。
 
mySubWin = window.open("sub.html","sub","width=320,height=240");

 このようにすると「mySubWin」を使って位置指定やサイズ指定が可能になります。以前にウィンドウの位置指定やサイズの指定を勉強しましたがサブウィンドウの場合にも同じものが使えます。ただ異なるのは、どのサブウィンドウの位置を指定するのか、を明示的に指定する点です。上記のようにmySubWinであれば
 
mySubWin.moveTo(320,300)
mySubWin.resizeTo(500,800)

 のように書きます。もしmySubWinを書かない場合には自分自身(親ウィンドウ)のサイズが変わってしまいます。
 実際のプログラムは以下のようになります。

<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
mySubWin = window.open("sub.html","sub","width=320,height=240");
}
// --></script>
</head>
<body>
<a href="javascript:subWin()">サブウィンドウを開く</a><br>
<a href="javascript:mySubWin.moveTo(0,0)">(0,0)へ移動</a><br>
<a href="javascript:mySubWin.resizeTo(480,360)">480 x 360サイズにする</a><br>
</body>
</html>

 クリックするとウィンドウの位置が変わったり、サイズが変わるのが分かるはずです。
 サブウィンドウ制御は、位置指定やサイズ指定だけでなくサブウィンドウ内の文字や画像、ページの背景色の指定や変更、サブウィンドウへの任意の文字の書き出しなど非常に多くの事が可能です。

 次回は任意の文字をサブウィンドウに書き出す方法について説明します。




2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)