window对象历史记录

写三个页面实现点击按钮前进后退等

页面一：

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="UTF-8">
5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.         <title>页面一</title>
8.         <style>
9.
10.         </style>
11.     </head>
12.     <body>
13.         <h1>页面1</h1>
14.         <button onclick="goForward()">前进</button>
15.         <a href="index2.html">跳转到页面2</a>
16.         <script>
17.             function goForward(){
18.                 history.forward()
19.                 // forward 加载下一个URL 前进
20.             }
21.         </script>
22.     </body>
23. </html>

页面二：

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="UTF-8">
5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.         <title>页面二</title>
8.         <style>
9.
10.         </style>
11.     </head>
12.     <body>
13.         <h1>页面2</h1>
14.         <button onclick="goBack()">后退</button>
15.         <a href="index.html">跳转到页面1</a>
16.         <a href="index3.html">跳转到页面3</a>
17.         <script>
18.             function goBack(){
19.                 history.back()
20.             }
21.         </script>
22.     </body>
23. </html>

页面三：

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="UTF-8">
5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.         <title>页面3</title>
8.         <style>
9.             progress{
10.                 width: 100%;
11.             }
12.         </style>
13.     </head>
14.     <body>
15.         <h1>页面3</h1>
16.         <button onclick="goPage1()">后退到底</button>
17.         <button onclick="goPage(25)">进度25%</button>
18.         <button onclick="goPage(50)">进度50%</button>
19.         <button onclick="goPage(75)">进度75%</button>
20.         <button onclick="goPage(100)">进度100%</button>
21.         <div>
22.             <progress value="0" max="100"></progress>
23.         </div>
24.         <script>
25.             function goPage1(){
26.                 history.go(-2)
27.                 // 前进或者后退指定的步数
28.             }
29.             function goPage(value){
30.                 document.querySelector('progress').value = value
31.                 history.pushState(value,'进度'+ value,'#' + value)
32.                 // history.pushState() 方法向浏览器历史添加一个状态。
33.                 document.title = '进度' + value
34.             }
35.
36.             //  注入的历史记录变化时可以获得事件通知
37.             window.onpopstate = function(e){
38.                 var value = e.state
39.                 console.log(e.state)
40.                 if(value == null) value = 0
41.                 // if后面有一条语句时（条件成立时执行一条语句）可以不写大括号
42.                 document.querySelector('progress').value = value
43.                 document.title = '进度' + value
44.             }
45.         </script>
46.     </body>
47. </html>

window对象 历史记录