第47回 「サブウィンドウを開く（２）」
今回はサブウィンドウを指定サイズで開く、画面上の指定位置に開く方法について説明します。前回はサブウィンドウを単純に開くだけでした。（以下のプログラム）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
window.open("sub.html","sub");
}
// --></script>
</head>
<body>
<form>
<input type="button" value="サブウィンドウを開く" onClick="subWin()">
</form>
</body>
</html>
まず指定サイズでサブウィンドウを開くにはパラメータを指定する必要があります。サイズ指定には２つありInternet Explorer、Netscape Navigatorとも共通です。
width=サイズ
height=サイズ
サイズの単位は「ピクセル*1」です。widthのみ、heightのみ、両方の指定が可能ですが両方指定する場合には,で区切ります。また、パラメータは"で囲む必要があります。
以下のプログラムは横幅320ピクセル、縦幅240ピクセルでサブウィンドウを開くものです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
window.open("sub.html","sub","width=320,height=240");
}
// --></script>
</head>
<body>
<form>
<input type="button" value="サブウィンドウを開く" onClick="subWin()">
</form>
</body>
</html>
widthとheightの値を変えて試してみるとよく分かるでしょう。
次に画面上の指定位置にサブウィンドウを開くパラメータについて説明します。画面上の指定位置に開く場合には以下の指定ができます。
left=Ｘ座標
top=Ｙ座標
screenX=Ｘ座標
screenY=Ｙ座標
Netscape 6以前のブラウザに対応させる場合にはscreenX,screenYとleft,topを併用します。Netscape 6、Internet Explorer 4以降であればleft,topのみで指定した位置にサブウィンドウを開くことができます。座標値も単位は「ピクセル」になります。
以下のプログラムはNetscape 6、Internet Explorer 4以降で座標(10,100)にサブウィンドウを開きます。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
window.open("sub.html","sub","left=10,top=100,width=320,height=240");
}
// --></script>
</head>
<body>
<form>
<input type="button" value="サブウィンドウを開く" onClick="subWin()">
</form>
</body>
</html>
Netscape 6以前にも対応させるには以下のようにscreenX,screenYも併記します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
window.open("sub.html","sub","screenX=10,screenY=100,left=10,top=100,width=320,height=240");
}
// --></script>
</head>
<body>
<form>
<input type="button" value="サブウィンドウを開く" onClick="subWin()">
</form>
</body>
</html>
Nescape 6以降でscreenX,screenYとleft,topの値が異なる場合にはleft,topで指定した位置が優先されます。
次回はフォームのボタンが押されたらサブウィンドウが開くのではなく、ハイパーリンク文字／画像が押されたらサブウィンドウを開く処理について説明します。
*1 画面上の１つの点