..

JavaScriptの入門とサンプル集
■JavaScript入門−ウインドウ編−ウインドウのサイズを変更する　　　　　■戻る　　　　　■次へ　　　　　■Home
■ウインドウのサイズを変更する

　ウインドウをサイズを変更するには、「window」オブジェクトの「resizeBy」か「resizeTo」というメソッドを使います。
★ウインドウの大きさを変える

　　　window.resizeBy(横幅,縦幅)
　　　window.resizeTo(横幅,縦幅)

　　　ウインドウの大きさを変更します
　　　「resizeBy」は相対的な大きさで指定します（現在の大きさからの変更）
　　　「resizeTo」は絶対的な大きさで指定します（指定の大きさへの変更）

　それでは、「resizeTo」メソッドを使ってサンプルプログラム１６のサブウインドウをさらに大きさの変更を付け加えるプログラムを作ってみましょう。

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

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

 〜sample17_1.html〜のリスト

（sample16_1.htmlとの変更点はこの色で示しています）





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

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

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

timeID=setInterval('winMove()',25);

// --></script>

</head>

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

 〜sample17_2.html〜のリスト

（sample16_2.htmlとの変更点はこの色で示しています）



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

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


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






ウインドウを閉じます

　　　■sample17_1.htmlを実行する


sample17_1.htmlの実行画面


..
■JavaScript入門−ウインドウ編−ウインドウのサイズを変更する　　　　　■戻る　　　　　■次へ　　　　　■Home

..