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

发布于 2024-12-14 16:37:44 字数 203 浏览 0 评论 0原文

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

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

hashchange 事件显然会在哈希值发生变化时触发。有什么解决办法吗?最好不用插件。我见过 jQuery 历史记录插件,但正在寻找最简单的解决方案。

感谢您的帮助。

Is it possible to detect the hashchange only on a browser history change (i.e. Back or Forward button)?

I have seen the onBeforeUnload event, but this event does not fire on hash change, as the window is not unloading.

The hashchange event obviously fires anytime the hash changes. Any fix? Preferably without a plugin. I have seen the jQuery history plugin, but am looking for the simplest solution.

Thanks for the help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

懷念過去 2024-12-21 16:38:10

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

You cannot do this with hashes, or even with the HTML5 History API. There are no events exclusively associated with the user clicking back or forward buttons. You probably need a different approach to the original problem, unless installing some kind of extensions or such on a client machine is feasible.

故笙诉离歌 2024-12-21 16:38:08

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

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

然后,当您检查哈希值时,您只需查看它是否包含 _chrome 即可检测它是什么类型的哈希更改。

I have a recommendation for a different approach. Lets say you have a link that goes to some page (but uses AJAX with no refreshing). When that link is clicked, you change the hash to whatever you like. Now, when the user clicks the back button, the hash changes back to what it was originally before the user clicked on the link...but what you could do is check if a click event was fired on a link or button (or whatever selector/event you want to check for). If it was fired, you know that request came from a click on the page itself. If there were no events fired that you're checking for, you know that the click came from the back or forward button.

Another thing you could do is append a suffix to the hash when it changes (from the back or forward button based on your checking of any events firing). So if you had a hash of #pageTitle you would turn it into #pageTitle_chrome to indicate that the hash was changed from the back button or forward button.

Then, when you're checking your hashes, you could just see if it contains _chrome to detect what kind of hash change it was.

濫情▎り 2024-12-21 16:38:02

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

What I think Chris was asking is for a way for the window.onhashchange event to work only when you are navigating through browser history (back/forward) buttons.

Answer = No... but you can put an if statment in the function.
I would do this:

$('.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');
  }
};

I did something similar on my site

It is all dynamically changing content. I still use the window.location.hash to keep track of the site states. If you navigate through the site and then begin to use the back forward buttons to navigate once the site is in the history it will change the states dynamically like if the user was actually clicking through the nav, rather than needing to reload the page afterward. It only checks the hash if you are using the history to navigate.

我很坚强 2024-12-21 16:37:59

查看 window.onhashchange 事件。

但目前并非所有浏览器都支持它。 此处查看 BA jQuery 哈希更改插件。如果您最终选择使用插件,它可能会起作用。

我希望这有帮助!

Take a look at the window.onhashchange event.

It is not currently supported in all browsers however. Take a look at the BA jQuery Hash Change Plugin here. It may work, if you choose to use a plugin in the end.

I hope this helps!

清晨说晚安 2024-12-21 16:37:56

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

I ended up marking a flag whenever my navigation was triggered, and if the flag was marked, the hashChange event would ignore it, otherwise it would handle it as if it was a back/forward event.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文