监听浏览器返回操作

监听浏览器返回操作

一、总结

一句话总结：

注意先要pushState一个地址，不然就监听不到

function pushHistory() {  
  var state = {  
    title: "title",  
    url: "#"  
  };  
  window.history.pushState(state, "title", "#xx");  
}
pushHistory();
window.addEventListener("popstate", function(e) {  
  console.log(e);
  alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
}, false);

1、popstate事件 是什么？

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

浏览器的前进和后退都会触发这个popstate事件，所以能起到一个监听页面变化的作用。

2、History.pushState()怎么使用？

pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。

window.history.pushState(state, "title", "#xx");

3、禁止返回上一页的一种方案？

利用pushState向浏览历史列表中插入当前页面，在点击后退前和点击时都插入一次，那样无论点前进还是后退永远都会留在这个页面了

history.pushState(null, null, document.URL);
window.addEventListener("popstate",function(e) {  
  console.log(e);
  history.pushState(null, null, document.URL);
}, false);

二、利用popstate事件和window下的history对象处理浏览器跳转问题

转自或参考：利用popstate事件和window下的history对象处理浏览器跳转问题
https://www.cnblogs.com/wancheng7/p/8542544.html

popstate事件

文档地址

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

就我目前的认识来看，无论是浏览器的前进还是后退都会触发这个popstate事件，所以只能起到一个监听页面变化的作用。

History 接口

• 属性
  • History.length 表示历史会话中元素的数目
  • History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
  • History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
• 方法

  • History.back()

    等同于history.go(-1)

  • History.forward()

    等同于historygo(1)

  • History.go()

    这个方法中如果参数超出范围或者不对就不会起效果

  • History.pushState()

    pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。下面将对这三个参数进行细致的检查

  function pushHistory() {  
    var state = {  
      title: "title",  
      url: "#"  
    };  
    window.history.pushState(state, "title", "#xx");  
   } 

  其他方法就不一一列举了，感兴趣的看文档

  监听浏览器返回按钮

  function pushHistory() {  
    var state = {  
      title: "title",  
      url: "#"  
    };  
    window.history.pushState(state, "title", "#xx");  
  }
  pushHistory();
  window.addEventListener("popstate", function(e) {  
    console.log(e);
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
  }, false);

   这个地方就监听了浏览器的返回事件，如果不先pushState一个地址就监听不到，直接跳转了

• 禁止返回上一页的一种方案

  history.pushState(null, null, document.URL);
  window.addEventListener("popstate",function(e) {  
    console.log(e);
    history.pushState(null, null, document.URL);
  }, false);

  这个其实就是利用pushState向浏览历史列表中插入当前页面，在点击后退前和点击时都插入一次，那样无论点前进还是后退永远都会留在这个页面了

如果大家还有什么关于利用history接口和popstate结合控制页面跳转的实际应用案例，欢迎留言讨论交流！