Javascript/jQuery 仅在浏览器后退/前进按钮单击时检测哈希更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8087421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/jQuery detect hash change only on browser back/forward button click
提问by Chris
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.
我已经看到 onBeforeUnload 事件，但是这个事件不会在哈希更改时触发，因为窗口没有卸载。
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.
hashchange 事件显然会在散列更改时触发。任何修复？最好没有插件。我看过 jQuery 历史插件，但我正在寻找最简单的解决方案。
Thanks for the help.
谢谢您的帮助。
采纳答案by dSquared
Take a look at the window.onhashchangeevent.
看看window.onhashchange事件。
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.
然而，目前并非所有浏览器都支持它。在此处查看 BA jQuery Hash Change Plugin 。如果您最终选择使用插件，它可能会起作用。
I hope this helps!
我希望这有帮助！
回答by frattaro
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.
每当我的导航被触发时，我都会标记一个标志，如果标记了该标志，hashChange 事件将忽略它，否则它会像处理后退/前进事件一样处理它。
回答by Damian
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.
我认为 Chris 要求的是让 window.onhashchange 事件仅在您浏览浏览器历史记录（后退/前进）按钮时才起作用。
Answer = No... but you can put an if statment in the function.
I would do this:
答案 = 否...但您可以在函数中放置一个 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');
}
};
I did something similar on my site
我在我的网站上做了类似的事情
It is all dynamically changing content. I still use the window.location.hashto 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.
这都是动态变化的内容。我仍然使用window.location.hash来跟踪站点状态。如果您浏览网站，然后在网站进入历史记录后开始使用后退按钮进行导航，它将动态更改状态，就像用户实际点击导航一样，而不需要事后重新加载页面。如果您使用历史进行导航，它只会检查哈希。
回答by Aaron
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.
我有一个不同的方法的建议。假设您有一个指向某个页面的链接（但使用 AJAX 没有刷新）。单击该链接后，您可以将哈希更改为您喜欢的任何内容。现在，当用户单击后退按钮时，哈希值会变回用户单击链接之前的原始值……但是您可以做的是检查是否在链接或按钮（或其他任何内容）上触发了单击事件要检查的选择器/事件）。如果它被触发，您就会知道该请求来自对页面本身的点击。如果没有您正在检查的事件触发，您就知道点击来自后退或前进按钮。
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 #pageTitleyou would turn it into #pageTitle_chrometo indicate that the hash was changed from the back button or forward button.
您可以做的另一件事是在哈希更改时将后缀附加到哈希（根据您检查的任何事件触发，从后退或前进按钮）。所以如果你有一个哈希值，#pageTitle你会把它变成#pageTitle_chrome表示哈希值是从后退按钮或前进按钮改变的。
Then, when you're checking your hashes, you could just see if it contains _chrometo detect what kind of hash change it was.
然后，当您检查散列时，您可以查看它是否包含_chrome以检测它是哪种散列更改。
回答by Esailija
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.
你不能用散列来做到这一点，甚至不能用 HTML5 历史 API。没有专门与用户单击后退或前进按钮相关联的事件。您可能需要对原始问题采取不同的方法，除非在客户端计算机上安装某种扩展或类似的东西是可行的。
