Javascript jQuery - hashchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3090478/
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
jQuery - hashchange event
提问by Ian Herbert
I am using:
我在用：
$(window).bind( 'hashchange', function(e) { });
to bind a function to the hash change event. This seems to work in IE8, Firefox and Chrome, but not in Safari and I assume not in earlier version of IE. For these browsers, I want to disable my JavaScript code that uses the hash and hashchangeevent.
将函数绑定到哈希更改事件。这似乎在 IE8、Firefox 和 Chrome 中有效，但在 Safari 中无效，我认为在早期版本的 IE 中无效。对于这些浏览器，我想禁用使用哈希和hashchange事件的JavaScript 代码。
Is there a way with jQuery that i can detect if the browser supports the hashchangeevent? Maybe something with jQuery.support...
jQuery 有没有办法检测浏览器是否支持该hashchange事件？也许有jQuery.support...
回答by CMS
You can detect if the browser supports the event by:
您可以通过以下方式检测浏览器是否支持该事件：
if ("onhashchange" in window) {
//...
}
See also:
也可以看看：
回答by Kevin Leary
An updated answer here as of 2017, should anyone need it, is that onhashchangeis well supported in all major browsers. See caniusefor details. To use it with jQuery no plugin is needed:
截至 2017 年，如果有人需要，这里的更新答案onhashchange是所有主要浏览器都得到很好的支持。有关详细信息，请参阅caniuse。要将它与 jQuery 一起使用，不需要插件：
$( window ).on( 'hashchange', function( e ) {
console.log( 'hash changed' );
} );
Occasionally I come across legacy systems where hashbang URL's are still used and this is helpful. If you're building something new and using hash links I highly suggest you consider using the HTML5 pushState API instead.
偶尔我会遇到仍然使用 hashbang URL 的遗留系统，这很有帮助。如果您正在构建新的东西并使用哈希链接，我强烈建议您考虑使用 HTML5 pushState API。
回答by James Westgate
There is a hashchange plug-in which wraps up the functionality and cross browser issues available here.
有一个 hashchange 插件，它包含了此处可用的功能和跨浏览器问题。
回答by james.garriss
A different approach to your problem...
解决您的问题的不同方法...
There are 3 ways to bind the hashchange event to a method:
有 3 种方法可以将 hashchange 事件绑定到方法：
<script>
window.onhashchange = doThisWhenTheHashChanges;
</script>
Or
或者
<script>
window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
</script>
Or
或者
<body onhashchange="doThisWhenTheHashChanges();">
These all work with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.
这些都适用于 Win 7 上的 IE 9、FF 5、Safari 5 和 Chrome 12。
回答by Paul Lan
try Mozilla official site: https://developer.mozilla.org/en/DOM/window.onhashchange
试试 Mozilla 官方网站：https: //developer.mozilla.org/en/DOM/window.onhashchange
cite as follow:
引用如下：
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
回答by johnny.rodgers
I just ran into the same problem (lack of hashchange event in IE7). A workaround that suited for my purposes was to bind the click event of the hash-changing links.
我刚刚遇到了同样的问题（IE7 中缺少 hashchange 事件）。适合我的目的的解决方法是绑定哈希更改链接的点击事件。
<a class='hash-changer' href='#foo'>Foo</a>
<script type='text/javascript'>
if (("onhashchange" in window) && !($.browser.msie)) {
//modern browsers
$(window).bind('hashchange', function() {
var hash = window.location.hash.replace(/^#/,'');
//do whatever you need with the hash
});
} else {
//IE and browsers that don't support hashchange
$('a.hash-changer').bind('click', function() {
var hash = $(this).attr('href').replace(/^#/,'');
//do whatever you need with the hash
});
}
</script>
回答by Khan Salahuddin
Note that in case of IE 7 and IE 9 if statment will give true for ("onhashchange" in windows) but the window.onhashchange will never fire, so its better to store hash and check it after every 100 millisecond whether its changed or not for all versions of IE.
请注意，在 IE 7 和 IE 9 的情况下，如果 statment 将为（Windows 中的“onhashchange”）提供 true，但 window.onhashchange 永远不会触发，因此最好存储哈希并在每 100 毫秒后检查它是否已更改适用于所有版本的 IE。
if (("onhashchange" in window) && !($.browser.msie)) {
window.onhashchange = function () {
alert(window.location.hash);
}
// Or $(window).bind( 'hashchange',function(e) {
// alert(window.location.hash);
// });
}
else {
var prevHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != prevHash) {
prevHash = window.location.hash;
alert(window.location.hash);
}
}, 100);
}
回答by Sven van den Boogaart
What about using a different way instead of the hash event and listen to popstate like.
使用不同的方式而不是散列事件并收听 popstate 之类的怎么样。
window.addEventListener('popstate', function(event)
{
if(window.location.hash) {
var hash = window.location.hash;
console.log(hash);
}
});
This method works fine in most browsers i have tried so far.
这种方法在我迄今为止尝试过的大多数浏览器中都可以正常工作。
回答by Morteza Ziyae
this tiny jQuery plugin is very simple to use: https://github.com/finnlabs/jquery.observehashchange/
这个小小的 jQuery 插件使用起来非常简单：https: //github.com/finnlabs/jquery.observehashchange/
回答by koppor
Use Modernizrfor detection of feature capabilities. In general jQuery offers to detect browser features: http://api.jquery.com/jQuery.support/. However, hashchange is not on the list.
使用Modernizr来检测特征能力。一般来说，jQuery 提供检测浏览器功能：http: //api.jquery.com/jQuery.support/。但是，hashchange 不在列表中。
The wiki of Modernizroffers a list of libraries to add HTML5 capabilities to old browsers. The list for hashchangeincludes a pointer to the project HTML5 History API, which seems to offer the functionality you would need if you wanted to emulate the behavior in old browsers.
Modernizr的wiki提供了一个库列表，用于向旧浏览器添加 HTML5 功能。该用于hashchange列表包含一个指向该项目HTML5纪录API，它似乎提供，如果你想仿效旧的浏览器的行为，你需要的功能。
