JavaScript/jQuery 如何仅在浏览器的后退/前进按钮点击时检测哈希值变化？

Question

是否可以仅在浏览器历史记录更改（即“后退”或“前进”按钮）时检测哈希更改？

我已经看到了onBeforeUnload事件，但是该事件不会在哈希更改时触发，因为窗口没有卸载。

显然，hashchange事件会在任何时候触发哈希更改。 有什么解决方法吗？ 最好不要使用插件。 我已经看到了jQuery历史插件，但正在寻找最简单的解决方案。

感谢您的帮助。

- Chris

Answer 1

每当我的导航被触发时，我会标记一个标志，如果标志已经被标记，则 hashChange 事件会忽略它，否则它将处理它，就像是后退/前进事件一样。

- frattaro

Answer 2

请看 window.onhashchange 事件。

但是，它并不被所有浏览器支持。如果你最终选择使用插件，可以看看 BA jQuery Hash Change Plugin 这里。

我希望这能对您有所帮助！

- dSquared

Answer 3

我认为Chris的问题是想要一个方法，使得window.onhashchange事件仅在通过浏览器历史记录（后退/前进）按钮导航时才起作用。

答案=不行...但你可以在函数中加一个if语句。 我会这样做：

$('.nav').click(function() {    //on the onclick event for your nav add a class
  $(this).addClass('navClick'); // before you change the hash.
  window.location.hash = 'state' + $(this).html();
});
function getLocationHash() {
  return window.location.hash.substring(1);
}
window.onhashchange = function(e) { // if element does not exist with your
  if ($('.navClick').length == 0) { // 'navClick' class then check hash
    switch(getLocationHash()) {
      case 'state1': 
        execute code block 1;
        break;
      case 'state2':
        execute code block 2;
        break;
      default: 
        code to be executed if different from case 1 and 2;
    }
  } else {                         // removes the class if it does
    $('.navClick').removeClass('navClick');
  }
};

我在我的网站上做了类似的事情。

这是完全动态变化的内容。我仍然使用window.location.hash来跟踪网站状态。如果您通过站点导航，然后开始使用“后退”和“前进”按钮进行导航，一旦站点被添加到历史记录中，它将动态地更改状态，就像用户实际上是通过导航单击进行导航一样，而不需要之后重新加载页面。只有在使用历史记录进行导航时才会检查哈希值。

- Damian

Answer 4

我有一个不同的建议。假设你有一个链接指向某个页面（但使用 AJAX 而不刷新）。当用户点击该链接时，你将哈希更改为任何你喜欢的内容。现在，当用户点击返回按钮时，哈希会更改回用户点击链接之前的原始状态...但是你可以检查是否在链接或按钮上触发了单击事件（或者你想要检查的任何选择器/事件）。如果触发了单击事件，你就知道该请求来自页面本身的单击。如果没有触发你正在检查的事件，你就知道该单击来自后退或前进按钮。

另一件事情是，在哈希更改时附加一个后缀（基于你检查任何事件触发的后退或前进按钮）。因此，如果你有一个哈希值为 #pageTitle，你会将其变成 #pageTitle_chrome，以表示哈希是从后退按钮或前进按钮更改的。

然后，当你检查哈希时，你只需要看它是否包含 _chrome，以检测它是什么类型的哈希更改。

- Aaron

Answer 5

使用哈希或HTML5 History API都无法实现这个功能。因为没有事件与用户点击“后退”或“前进”按钮独立关联。除非在客户端安装某种扩展程序之类的解决方案可行，否则您可能需要采用不同的方法来解决原始问题。

- Esailija