ywork2020.com

Title

ウィンドウサイズを新しい値で変更する

目次 (INDEX)

window.resizeTo とは

ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓
ここで説明する resizeTo とは次の語句からなる JavaScript のメソッドです。
resize
読み: リサイズ
意味: サイズを変更する
to
読み: トゥ
意味: ~の方に、~に至る

目次に戻る

window.resizeTo メソッドの概要

このメソッドは、引数に与えたピクセル値で、現在のウィンドウを新しい値でリサイズします。

この新しいウィンドウサイズはスクロールバーやタイトルバーを含みます。

ただし、これは全てのウィンドウをリサイズできるわけではありません。 リサイズできるのは window.open() により、単独で開かれたウィンドウのみです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

window.resizeTo(newWidth, newHeight)
  • newWidth: 横幅の新しい値です。ピクセル単位で指定します。
  • newHeight: 縦幅の新しい値です。ピクセル単位で指定します。

目次に戻る

サンプルコードと実行結果

ここでは、2つのボタンを配置しています。

まず、ウィンドウ.オープン のボタンをクリックして単独のウィンドウで、このページを開いてください。 次に、単独のウィンドウで開いたページの ウィンドウ.リサイズ のボタンをクリックしてください。

ウィンドウ.リサイズ をクリックすると、ウィンドウの縦横の幅は 300 ピクセルに変更されます。 なお、概要のところでも述べていますが、このメソッドは単独のウィンドウでしか機能しません。

サンプルコード: HTML
<body>
	<button onclick="funcWindowOpen()"> ウィンドウ.オープン </button>
	<hr style="margin: 3em 0;">
	<button onclick="funcResizeTo()"> ウィンドウ.リサイズ </button>
	<script>...</script>
</body>
  • 02: button (このボタンをクリックすると funcWindowOpen() 関数を呼び出します。)
  • 04: button (このボタンをクリックすると funcResizeTo() 関数を呼び出します。)
サンプルコード: script
<script>
	function funcWindowOpen(){
		window.open("ファイル名", null, "width=650, height=600, left=200, top=200");
	}
	function funcResizeTo(){
		window.resizeTo(300, 300);
	}
</script>
  • 02-04: funcWindowOpen() (この関数は 03 行目のコードりより、新しい単独のウィンドウを開きます。)
  • 05-07: funcResizeTo() (この関数は 06 行目のコードにより、ウィンドウをリサイズします。)
実行結果:

目次に戻る