JavaScriptのサンプル

ウィンドウの大きさを変更するスクリプトです。

(例:ボタンのクリックでサブウィンドウの大きさを変更する)

サブウィンドウを開く

コード

メインウィンドウのソース
<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

function disp(url){

	window.open(url, "window_name", "width=300,height=200,scrollbars=yes,resizable=yes");

}

// -->
</script>

</head>
<body>

<p><a href="example_sub10.html" target="window_name" onClick="disp('example_sub10.html')">サブウィンドウを開く</a></p>

</body>
</html>
サブウィンドウのソース
<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

function change(size){

	if(size == 'big'){ // 拡大の処理

		window.resizeBy(20, 20); // (横幅 , 高さ)

	}
	else if(size == 'small'){ // 縮小の処理

		window.resizeBy(-20, -20); // (横幅 , 高さ)

	}

}

// -->
</script>

</head>
<body>

<p>
<input type="button" value="拡大" onClick="change('big')">
<input type="button" value="縮小" onClick="change('small')">
</p>

</body>
</html>

解説

上記の例は、まずメインウィンドウ内のリンクでサブウィンドウを開き、そのサブウィンドウの大きさをボタンのクリックで変更しています。

サブウィンドウ内の説明

<head></head> 内にスクリプトを記述しておき、ボタンのクリックでスクリプトを実行します。

サブウィンドウのサイズ変更は、

window.resizeBy(20, 20)

この部分で指定しています。

  • resizeBy() … 現在のサイズから相対的に変更する指定
  • 20, 20 … 左が横幅の指定、右が高さの指定

この例の場合、クリックするたびに 20×20 ずつ大きくなっていきます。

逆に小さくしたいときはマイナスを指定します。

window.resizeBy(-20, -20)

この例の場合、クリックするたびに 20×20 ずつ小さくなっていきます。

数値を大きくするほど、一回の変更量は大きくなります。

青い文字の部分は、必要に応じて書き換えてください。