5

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

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

hashchange 事件显然会在哈希更改时触发。有什么修复吗？最好没有插件。我看过 jQuery 历史插件，但我正在寻找最简单的解决方案。

谢谢您的帮助。

4

5 回答 5

6

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

于 2013-04-16T12:50:48.437 回答
5

看看window.onhashchange事件。

然而，目前并非所有浏览器都支持它。看看这里的 BA jQuery Hash Change Plugin 。如果您最终选择使用插件，它可能会起作用。

我希望这有帮助！

于 2011-11-10T23:11:00.803 回答
2

我认为 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来跟踪站点状态。如果您浏览站点，然后在站点进入历史记录后开始使用后退按钮进行导航，它将动态更改状态，就像用户实际点击导航一样，而不是之后需要重新加载页面。如果您使用历史记录进行导航，它只会检查哈希。

于 2012-07-18T16:13:54.893 回答
1

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

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

然后，当您检查哈希时，您可以查看它是否包含_chrome以检测它是哪种哈希更改。

于 2011-11-10T23:30:24.497 回答
0

您无法使用散列，甚至 HTML5 History API 来做到这一点。没有专门与用户单击后退或前进按钮相关的事件。您可能需要一种不同的方法来解决原始问题，除非在客户端机器上安装某种扩展等是可行的。

于 2011-11-10T23:06:20.013 回答