检测浏览器历史操作答案

【问题标题】：Detecting Browser History Actions检测浏览器历史操作
【发布时间】：2013-01-29 15:10:41
【问题描述】：

我正在使用推送状态构建一个 Html 5 网站，我想知道它是否可以在 javascript 或 JQuery 中检测浏览器的后退按钮是否已被按下。我想将它包含在这样的 if 语句中：

if (back_btn clicked){
//do stuff
}
if (forward_btn clicked){

}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您正在寻找popstate event。

一个例子：

window.onpopstate = function(event) {
    alert("location: " + document.location);
}

或者使用广受欢迎的 jQuery：

$(window).on('popstate',function(event) {
    alert("location: " + document.location);
});

每当访问历史记录时都会触发，例如后退/前进。快速说明一下，在 Chrome 中，这也会在页面加载时触发，因此一种快速的方法是检查事件是否为空。

if(event.originalEvent.state!=null){
    // do something
}

另一个很好的资源是History.js jQuery 插件，它具有使用主题标签等的后备功能。它还使 popstate 事件的检测变得非常简单。

【讨论】：

我认为这与手动按下后退和前进按钮无关。
你显然没有进入该页面。或曾经使用过。
第二个选项... :)，我只是没有仔细阅读。 :(
哦，@LifeInTheGrey 指向"pushstate magic" 的链接也很棒；)
我能想到的唯一方法是将它们在 sessionStorage 中的位置日志维护为 prevPage 数组（如果按下后退按钮，则为 nextPage），然后将其 onpopstate 与历史一旦加载。不过它会超级 hacky，而且我从来没有做过这样的事情。

【解决方案2】：

对于 AngularJS

$window.onpopstate = function(e) {
    $window.alert("location: " + $location.path());
}

【讨论】：

【解决方案3】：

popstate 事件具有 state 属性。您应该跟踪它的值以检测是否按下了后退或前进按钮。

var previousState = 0
window.addEventListener('popstate', (event) => {
  if (event.state > previousState) {
    console.log('Forward button pressed')
  } else {
    console.log('Back button pressed')
  }
  previousState = event.state
})

【讨论】：