history对象常用方法-拓冰建站

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history.back( )	后退功能
history.forward( )	前进功能
go(参数）	前进后退功能，如果是1，就前进一个页面；-1就后退一个页面

示例：

创建3个页面，第二个页面来实现前进和后退功能

history1页面

<!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>

history2页面

<!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>

history3页面

<!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>