■ウインドウを動かす
ウインドウを動かすには、「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の実行画面
..
|