別窓を開く関数

まずは移動する別窓を表示させる必要があるので、その関数を作成します。 320×240ピクセルの別窓を、画面上の座標（100,50）に表示させてみます。 HTMLのヘッダーに以下の関数を記入して下さい。

<script>

function winOpen()
{
  window.open("movewin.html","subwin",
              "width=320,height=240,left=100,top=50");
}
</script>

そしてbody内でこの関数を呼び出すボタンを作ります。

<form>
<input type="button" value="サンプル" onclick="winOpen()">
</form>

これで準備完了です。

別ウィンドウを移動させる

次に別窓で表示するページを作ります。前述の関数winOpen()では、movewin.htmlを開くように指定していますので、 そのファイル名でHTMLファイルを作成して下さい。そしてmovewin.htmlのヘッダーに以下のように記入します。

<script>

//ウィンドウを相対的に移動
function move1(yoko,tate){

  moveBy(yoko,tate);

}

//ウィンドウを座標指定で移動
function move2(yoko,tate){

  moveTo(yoko,tate);
  
}

</script>

関数move1()は、ウィンドウを相対的に移動させ、 関数move2()は、ウィンドウを指定した座標に移動させます。 相対指定の場合はmoveBy()を、 絶対位置指定（座標指定）の場合はmoveTo()を使います。 「B」と「T」が大文字なので気を付けて下さい。

moveBy(横の移動距離,縦の移動距離)

ウィンドウを指定した数値分移動します

moveTo(横の座標,縦の座標)

ウィンドウを指定した座標に移動します

各関数には引数が２つありますが、 それぞれ横・縦の移動距離or座標を柔軟に指定てきるようにしています。

最後に、movewin.htmlのbody内に以下のボタンを設置してみましょう。

<form>
<input type="button" value="右へ" onclick="move1(10,0)"><br>
<input type="button" value="左へ" onclick="move1(-10,0)"><br>
<input type="button" value="上へ" onclick="move1(0,-10)"><br>
<input type="button" value="下へ" onclick="move1(0,10)"><br>

<input type="button" value="元の位置" onclick="move2(100,50)">

</form>

方向を示す各ボタンを押すと、目的の方向へ10pxずつ移動します。 元の位置ボタンを押すと、最初に別窓を開いた位置(100,50）に移動します。

このmoveBy()やmoveTo()は別窓だけでなく、メインウィンドウでも使えます（以下にサンプル）。 しかしブラウザの表示位置を勝手に変えられると怒る人もいるので、 別ウィンドウのみで使用しましょう。

次のページでは、別窓を開いた後にリサイズする方法について解説します。