抽空研究了下这两个新方法，确实可以解决很多问题

1、使用pushState()方法 可以控制浏览器自带的返回按钮:

有时候我们想让用户点击浏览器返回按钮时，不返回，或执行其他操作，这时，就用到history.pushState()方法

讲解：

history.pushState(data,title,url) //每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面了，

 

data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。

   title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。

     url：地址栏的值，若不需要可用空来代替。

// 监听浏览器的前进后退事件：

  2.      window.addEventListener("popstate", function() {
  3.         // 取出 设置好的 history.state 值，做判断
  5.      });

 

示例：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <button class="btn" onclick="btnFun();">点击新增一条历史记录</button>
  10.     </div>
  11.     <script>
  12.         console.log(\'增加历史记录前 state的值：\',history.state); // null
  13. function btnFun() {//点击事件
  14. // 增加一个历史记录
  15. history.pushState(\'a\',null,\'2.html?b=1\');
  16.             console.log(\'增加历史记录后 state的值：\',history.state); // a
  17. };
  18.         window.addEventListener(\'popstate\',function() {
  19.             var state = history.state;//取出state值
  20. //注意：在此处时（点击后退按钮时），state的值已经为null
  21.             // （因为返回时历史记录会被删除，浏览器动作）
  22. console.log(\'点击后退按钮后 state的值：\',state); // null
  23.             //判断，想要执行的操作
  24. });
  25.     </script>
  26. </body>
  27. </html>

 

 

2、history.replaceState() 与pushState()功能类似，除了这点：

replaceState()是用来修改当前的历史记录(history实体)，而不是创建一个新的历史记录，所以，当执行完history.replaceState()后，点击返回按钮照样会返回上一个一面。  当需要更新一个state对象或者当前history实体时，可以用replaceState()来实现。

用法：当在a页面使用replaceState()修改了历史记录后，跳转到b页面，后退到a页面时，历史记录就是修改过的。

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <button class="btn" onclick="btnFun();">点击修改本页历史记录</button>
  10.     </div>
  11.     <br/>
  12.     <div>
  13.         <a href="b.html">点击跳转到b页面</a>
  14.     </div>
  15.     <script>
  16.  
  17.         function btnFun() {//点击事件
  18. history.replaceState(\'a\',null,\'a.html?a=1\');
  19.             console.log(\'修改历史记录后 state的值：\',history.state); // a
  20. };
  21.     </script>
  22. </body>
  23. </html>

 

点击跳转到b页面后 ，执行返回操作

回到a页面，url中?a=1还存在，我们可以利用这个参数在页面中执行一些操作，比如列表的选中

版权声明：本文为lguow原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lguow/p/9222272.html