Question

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

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

散列事件显然会随着哈希更改而触发。任何修复？优选地，没有插件。我已经看过jQuery历史插件，但我正在寻找最简单的解决方案。

感谢您的帮助。

Answer 1

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

Answer 2

查看window.onhashchange事件。

但目前并非所有浏览器都支持此功能。看看BA jQuery Hash Change Plugin here。如果您最终选择使用插件，它可能会有效。

我希望这有帮助！

Answer 3

我认为克里斯问的是，只有当您浏览浏览器历史记录（后退/前进）按钮时，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');
  }
};

我在my site

上做了类似的事情

这是所有动态变化的内容。我仍然使用window.location.hash来跟踪网站状态。如果您浏览网站，然后在网站进入历史记录后开始使用后退按钮进行导航，则会动态更改状态，就像用户实际点击导航一样，而不是之后需要重新加载页面。如果您使用历史记录进行导航，它只会检查哈希值。

Answer 4

我建议采用不同的方法。让我们说你有一个链接到某个页面（但使用AJAX没有刷新）。单击该链接后，您可以将哈希值更改为您喜欢的任何内容。现在，当用户单击后退按钮时，哈希值会更改回用户点击链接之前的原始内容...但您可以做的是检查是否在链接或按钮上触发了单击事件（或者其他任何内容）要检查的选择器/事件）。如果它被解雇，您知道该请求来自页面本身的点击。如果没有您正在检查的事件被触发，您知道点击来自后退或前进按钮。

您可以做的另一件事是在更改时为哈希添加后缀（根据您检查任何事件触发，从后退或前进按钮）。因此，如果您有一个#pageTitle的哈希值，您可以将其转换为#pageTitle_chrome，以指示哈希值已从后退按钮或前进按钮更改。

然后，当你检查哈希值时，你可以看看它是否包含_chrome来检测它是什么样的哈希值。

Answer 5

您无法使用哈希，甚至使用HTML5历史记录API执行此操作。没有与用户单击后退或前进按钮专门关联的事件。除非在客户端计算机上安装某种类型的扩展，否则您可能需要采用不同的原始问题方法。

Javascript / jQuery仅在浏览器后退/前进按钮单击时检测哈希更改

5 个答案: