サブウィンドウの移動JavaScript入門

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

ウィンドウを移動させるには以下の命令を使います。

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

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

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

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

moveBy()は相対的な移動量を指定するのに対し、moveTo()は移動先の座標を指定します。最初の引数が横、2つ目が縦のの値を指定します。

別ウィンドウを移動させるサンプルスクリプト

では、別ウィンドウを移動させるスクリプトを書いてみましょう。

別窓を開く

最初に、別ウィンドウを表示させておきましょう。320×240ピクセルの別窓を、画面上の座標（100,50）に表示させてみます。スクリプトは以下のような感じです。

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

<script>

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

別窓を動かすためのスクリプト

今度は、開いたウィンドウを移動させるスクリプトです。これは実際に動かすmovewin.htmlのbody内に記述してください。

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

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

最初のボタン４つは10ピクセルずつ移動させるためのボタン、5つ目のボタンは最初に表示した座標に戻すためのボタンです。

相対的に移動させるには、moveBy()を使います。一方絶対座標を指定するには、moveTo()を使います。サンプルを見てその通りに動くか確認なさってください。

以前は別ウィンドウではなくメインウィンドウでも移動していましたが、現在では動かないようです。でも、 ブラウザの表示位置を勝手に変えられたら不快に感じるのではないでしょうか。ですから、動かなくなって正解だと思います。