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

Posted

技术标签:

【中文标题】Javascript/jQuery 仅在浏览器后退/前进按钮单击时检测哈希更改【英文标题】:Javascript/jQuery detect hash change only on browser back/forward button click 【发布时间】:2011-12-26 14:37:35 【问题描述】:

是否可以仅在浏览器历史记录更改(即后退或前进按钮)上检测 hashchange?

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

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

感谢您的帮助。

【问题讨论】:

【参考方案1】:

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

【讨论】:

【参考方案2】:

看看window.onhashchange 事件。

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

我希望这会有所帮助!

【讨论】:

【参考方案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');
  
;

我在my site上做了类似的事情

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

【讨论】:

【参考方案4】:

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

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

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

【讨论】:

【参考方案5】:

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

【讨论】:

以上是关于Javascript/jQuery 仅在浏览器后退/前进按钮单击时检测哈希更改的主要内容,如果未能解决你的问题,请参考以下文章

Javascript/JQuery 仅在页面焦点上执行 Javascript

如何使功能仅在第一个主体加载时起作用?

仅在 swift 中更改后退栏按钮项的颜色

Windows 10 UWP 应用程序 - 后退按钮仅在第二次按下时有效

仅在特定屏幕中对物理后退按钮按下执行减速器操作以响应本机

使用 Jquery 过滤功能锚定标签和浏览器历史记录