Step By Step

20代会社員。人生を一歩ずつ、歩いています。

JavaScriptを利用した画面遷移

すごく簡単なサンプル。

main.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<frameset cols="50%,*" frameborder="0" border="0">
	<frame src="body1.html" name="mainFrame">
	<frame src="body2.html" name="subFrame">
</frameset>
</html>

body1.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="sample.css" />
<head>
</head>
<body class="body1">
	<H1>Hello,World</H1>
	<input type="button" name="button1" value="次へ" onclick="top.location.href='main.html'" >
</body>
</html>

body2.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="sample.css" />
<head>
</head>
<body class="body2">
	<H1 style="align:right">Next,World</H1>
</body>
</html>

sample.css

@charset "Shift_JIS";
.body1{
	background-color:red;
}

.body2{
	background-color:yellow;
}

onclickでtop.location.href=~としているのは、全フレームを解除して画面遷移するため。
location.href=~だけだとそのフレーム内で画面遷移してしまう。