JavaScript 画面遷移

今回は画面遷移をやります。

画面遷移

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<meta http-equiv="refresh" content="10;URL=test2.html">
</head>
<body>
	<a href="test2.html">リンク１</a>
	<input type="button" id="id1" value="リンク２" />
	<input type="button" id="id2" value="リンク３" />
	<input type="button" id="id3" value="新画面" />
	<form method="POST" action="./test2.html" name="name0" id="id0">
		<input type="submit" id="id4" value="Submit" />
	</form>
</body>
<script type="text/javascript">

	document.getElementById( "id1" ).onclick = function(){
		document.location = "test2.html";
	};
	document.getElementById( "id2" ).onclick = function(){
		document.location.href = "test2.html";
	};
	document.getElementById( "id3" ).onclick = function(){
		window.open("test2.html");
	};

</script>
</html>

metaタグによる画面遷移

metaタグで http-equiv="refresh" を指定すると指定時間後に指定ページに画面遷移します。

時間とページは content で指定します。content="秒数;URL=遷移先URL" となります。

aタグのhref属性による画面遷移

aタグのhref属性にURLを貼る画面遷移です。aタグで囲んだ部分をクリックすると画面遷移します。aタグで画像を囲むと画像クリックで画面遷移します。

submitボタンでFormに指定したURLに画面遷移

submitボタンが押されたり、submit()関数が実行されるとFormで指定したURLを実行します。通常はPOSTを指定しますが、GETも指定できます。

document.location(.href)で画面遷移

document.location または document.location.href でURLを指定して画面遷移します。

window.openで画面遷移

window.open でURLを指定すると新しい画面で表示されます。。

画面遷移前の処理

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>JavaScriptのテストページ</title>
</head>

<body>

	<input type="button" id="id3" value="新画面" />

</body>
<script type="text/javascript">

	var win = null;

	//ボタンのイベント
	document.getElementById("id3").onclick = function () {
		//子画面が開いていたら閉じる
		if (win && !win.closed) {
			win.close();
		}

		//子画面を開く
		win = window.open("test2.html");
	};

	//画面終了時の処理
	window.onbeforeunload = function () {

		//子画面が開いていたら閉じる
		if (win && !win.closed) {
			win.close();
		}
	};
</script>

</html>

画面終了時の処理はwindow.onbeforeunloadを使用します。
以下のように記述すると終了前にダイアログを出せます。

				
	window.onbeforeunload = function (e) {
		e.preventDefault();
		return '';
	};

ページのトップへ戻る