window对象 历史记录

原创 黄良钵  2017-07-24 21:54  阅读 203 次 评论 0 条

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

页面一:

  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.         </style>
  10.     </head>
  11.     <body>
  12.         <h1>页面1</h1>
  13.         <button onclick="goForward()">前进</button>
  14.         <a href="index2.html">跳转到页面2</a>
  15.         <script>
  16.             function goForward(){
  17.                 history.forward()
  18.                 // forward 加载下一个URL 前进
  19.             }
  20.         </script>
  21.     </body>
  22. </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.         </style>
  10.     </head>
  11.     <body>
  12.         <h1>页面2</h1>
  13.         <button onclick="goBack()">后退</button>
  14.         <a href="index.html">跳转到页面1</a>
  15.         <a href="index3.html">跳转到页面3</a>
  16.         <script>
  17.             function goBack(){
  18.                 history.back()
  19.             }
  20.         </script>
  21.     </body>
  22. </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.             window.onpopstate = function(e){
  37.                 var value = e.state
  38.                 console.log(e.state)
  39.                 if(value == null) value = 0
  40.                 // if后面有一条语句时(条件成立时执行一条语句) 可以不写大括号
  41.                 document.querySelector('progress').value = value
  42.                 document.title = '进度' + value
  43.             }
  44.         </script>
  45.     </body>
  46. </html>
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情