如何禁止浏览器中点回退按钮能回退到上一页?

Posted 2022-05-19 asdfasdfasdad

概述

当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在javascript代码中调用history.back()）

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

html5的新API扩展了window.history:

• 可以存储当前历史记录点pushState、
• 替换当前历史记录点replaceState、
• 监听历史记录点popstate。

示例代码：

  // 把这段代码放到需要点击浏览器回退按钮的页面中，
  history.pushState(back: 1, null, "?back=1");
  window.onpopstate = function(event) 
   console.log(event);
    history.pushState(back: 1,null, "?back=1");
  ;

使用说明 ：

history.pushState(data,title,url);
// 其中第一个参数data是给state的值；
// 第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；
// 第三个参数url是你想要去的链接；

兼容性:

欢迎指正交流！

文献：https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate