..

JavaScriptの入門とサンプル集
JavaScript入門−ウインドウ編(ウインドウを動かす)     ■戻る     ■次へ     ■Home

ウインドウを動かす

 ウインドウを動かすには、「window」オブジェクトの「moveBy「moveTo」というメソッドを使います。

ウインドウを動かす

   window.moveBy(X座標,Y座標)
   window.moveTo(X座標,Y座標)


   ウインドウを動かします
   「moveBy」は現在の位置からの相対座標(動かす距離)で指定します
   「moveTo」は画面左上端からの絶対座標で指定します


 それでは、「moveTo」メソッドを使ってサンプルプログラム15のサブウインドウを移動させるプログラムを作ってみましょう。


<html>
<head>
<title>親ウインドウ</title>
</head>

<body>
<br>
<a href="#" onClick="window.open('sample16_2.html','newWin',
'width=512,height=255,left=32,top=32')
">
ここをクリックするとサブウイウドウを開きます
</a>
</body>
</html>

〜sample16_1.html〜のリスト

(sample15_1.htmlとの変更点はこの色で示しています)





URLを「sample16_2.html」に、開くウインドウの名前を「newWin」に、横幅を512ピクセルに、縦幅を255ピクセルに、表示位置をデスクトップの左上の端から32ピクセル離れた場所に新しいウインドウを開きます

<html>
<head>
<title>サブウインドウ</title>

<script language="JavaScript"><!--
   timeID=10;
   wx=32;
   wy=32;
   function winMove()
   {
      wx+=8;
      wy+=8;
      if(wx>255){clear.Interval(timeID);}
      window.moveTo(wx,wy);
   }

setInterval('winMove()',25);


// --></script>

</head>
<body>
<a href="#" onClick="window.close()">
ここをクリックするとサブウインドウを閉じます
</a>
</body>
</html>

〜sample16_2.html〜のリスト

(sample15_2.htmlとの変更点はこの色で示しています)



タイマーIDの初期設定
ウインドウのX座標の初期設定
ウインドウのY座標の初期設定
関数「winMove」の定義

ウインドウのX座標に8を加算
ウインドウのY座標に8を加算
ウインドウのX座標が255ピクセルを超えたら割り込み解除
ウインドウを移動


関数「winMove」への割り込み開始





ウインドウを閉じます

   ■sample16_1.htmlを実行する


sample16_1.htmlの実行画面


..

JavaScript入門−ウインドウ編(ウインドウを動かす)     ■戻る     ■次へ     ■Home


..