Question

我有一个名为back()的函数，它将用于ajax调用。实际上我有一个包含最后5个搜索结果的数组堆栈，并且后退函数将切换到先前的结果集（根据该数组堆栈），它甚至会在您使用window.history.pushState()时更改URL点击后退按钮。

我正在谈论的那个后退按钮是浏览器内部的一个元素，用于撤销back()功能。现在我想在用户点击浏览器的后退按钮时撤销back()功能。像这样：

window.onhashchange = function() {
 back(); // this function also changes the url
}

但遗憾的是，当我点击浏览器的背面时window.onhashchange将被撤销两次。因为使用window.onhashchange更改网址时，window.history.pushState()会被撤销。

无论如何，我怎样才能检测到哪些内容会更改网址？我的JS代码还是浏览器的后退按钮？

Answer 1

您可以使用performance.navigation.type

在任何给定时间点，例如在document.onload上，您都可以阅读type的值，如果是的话：

0通过链接，书签，表单提交，脚本或在地址栏中输入网址来访问该页面。
1通过单击“重新加载”按钮或通过Location.reload（）方法访问该页面。
2通过导航到历史记录来访问该页面。
255任何其他方式。

请注意，根据兼容性表格，支持是有限的。然而，从它的外观来看，似乎桌子已经过时了。它说它不支持chrome，我只测试了它并在我的chrome版本（67.0）

上按预期工作

Answer 2

解决方案之一是使用localstorage选项实现onunload事件。这是我的头脑，也许你需要修正，但这是基础！

var history = [];

window.onload = function(){

  var handler;

  if ( localStorage.getItem('history') == null ) {
   // FIRST TIME
   history[0] = window.location.href;
   localStorage.setItem("history", JSON.stringify(history));
  }
  else {
   handler = localStorage.getItem('history');
   handler = JSON.parse(handler);
   history = handler;
   // Just compare now 
   if (history[history.length-1] == window.location.href) {
       // no change
   } else {
      history.push(window.location.href);     
   }

  }

}

window.onunload = function(){

   localStorage.setItem('history', JSON.stringify(history));

}

注意：

自2011年5月25日起，HTML5规范声明要调用 window.alert（），window.confirm（）和window.prompt（）方法可能是在此活动期间被忽略。有关更多信息，请参阅HTML5规范的信息。

如何检测浏览器中的后退按钮？

2 个答案: