拦截浏览器后退事件

小敏哥 文章源自：查看原文 (opens new window)

// 跳转到其他页面
function toUrl(url){
  //首先跳回顶点，防止多次添加记录
  window.history.pushState({target:  "Final",}, "", location.href);
  location.href=url;
}

// 回退到上一级
function back() {
  let backCount=history.state.target == "Final"?-3:-2;
  history.go(backCount);
}

// 停留在本页面
function stay() {
  history.forward();
}
 
 
//实际的拦截操作
 function doIt() {
  //此处添加500毫秒延迟，目的是等待历史记录变化之后再添加空地址，使空地址能准确添加到栈顶，防止出错
  setTimeout(() => {
    if (!(history.state && history.state.target == "Final")) {
      window.history.pushState({target: "MeanSure", random: Math.random()}, "", location.href);
      window.history.pushState({target: "Final", random: Math.random()}, "", location.href);
    }
    window.addEventListener("popstate", function (e) {
      if (e.state && e.state.target == "MeanSure") {
        //此处可调用一些自定义的操作，例如弹窗提示之类的，最后根据实际需要可调用上面三个函数中的任何一个，用于决定当前自定义操作完成之后，需要停留在本页面，还是回退，还是跳转到其他页面
        doSomething();
        //stay();如此操作会停留在本页面
        //back();如此操作会无副作用回退到上一级
        //toUrl（'http://www.baidu.com'）;如此操作会执行完之定义操作之后跳转到百度
      }
    }, false);
  }, 500);
}