window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
history.back( ) | 后退功能 |
history.forward( ) | 前进功能 |
go(参数) | 前进后退功能,如果是1,就前进一个页面;-1就后退一个页面 |
创建3个页面,第二个页面来实现前进和后退功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history1.html</title>
<style>
*{
padding:0px;
margin:0px;
}
div{
width:200px;
height:100px;
color:red;
border:1px solid purple;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div>我是history1.html页面</div>
<a href="history2.html">跳转到history2.html页面</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history2.html</title>
</head>
<body>
<a href="history3.html">history3.html</a>
<input type="button" name="" id="" value="后退一步" onclick="goback()">
<input type="button" name="" id="" value="前进一步" onclick="gofoward()">
<script>
//页面后退一步
function goback(){
//history.back();
history.go(-1);
}
//页面前进一步
function gofoward(){
//history.foward();
history.go(1);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history3.html</title>
</head>
<body>
<h2>我是history3.html页面</h2>
<script>
for(var i=0;i<5;i++){
for(var j=0;j<5-i;j++){
document.write('?');
}
document.write('<br>');
}
</script>
</body>
</html>