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");

}

// -->
</script>

</head>
<body>

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

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

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

function change(move){

	if(move == 'top'){ // 上に移動

		window.moveBy(0, -20); // (左右 , 上下)

	}
	else if(move == 'left'){ // 左に移動

		window.moveBy(-20, 0); // (左右 , 上下)

	}
	else if(move == 'right'){ // 右に移動

		window.moveBy(20, 0); // (左右 , 上下)

	}
	else if(move == 'bottom'){ // 下に移動

		window.moveBy(0, 20); // (左右 , 上下)

	}

}

// -->
</script>

</head>
<body>

<p>
<input type="button" value="↑上" onClick="change('top')">
<br>
<input type="button" value="←左" onClick="change('left')">
<input type="button" value="右→" onClick="change('right')">
<br>
<input type="button" value="↓下" onClick="change('bottom')">
</p>

</body>
</html>

解説

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

サブウィンドウ内の説明

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

サブウィンドウの移動は、

window.moveBy(0, 0)

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

  • moveBy() … 現在の位置から相対的に移動する指定
  • 0, 0 … 左が左右の指定、右が上下の指定

正数の場合は右方向または下方向の移動、マイナスの場合は左方向または上方向の移動になります。以下を参考にしてください。

  • window.moveBy(0, -20) … 上に 20 移動
  • window.moveBy(-20, 0) … 左に 20 移動
  • window.moveBy(20, 0) … 右に 20 移動
  • window.moveBy(0, 20) … 下に 20 移動

この例の場合、クリックするたびに 20 ずつ移動することになります。

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

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