blocks|key|1217621|text|到2017年为止，如果有人需要的话，最新的答案是onhashchange在所有主流浏览器中都得到了很好的支持。详情请参见caniuse。要在jQuery中使用它，不需要任何插件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1217622|$(+window+).on(+'hashchange',+function(+e+)+{
++++console.log(+'hash+changed'+);
}+);|code-block|syntax|javascript|1217623|偶尔我会遇到一些遗留系统，其中仍然使用hashbang+URL，这对我很有帮助。如果您正在构建新的东西并使用散列链接，我强烈建议您考虑使用HTML5+pushState应用编程接口。|1217624|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=hashchange^0|O|C|1O|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

An updated answer here as of 2017, should anyone need it, is that <code>onhashchange</code> is well supported in all major browsers. See <a href="http://caniuse.com/#feat=hashchange" rel="noreferrer">caniuse</a> for details. To use it with jQuery no plugin is needed:

<pre><code>$( window ).on( 'hashchange', function( e ) {
 console.log( 'hash changed' );
} );
</code></pre>

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.

blocks|key|1002651|text|有一个hashchange插件，它封装了功能和跨浏览器问题available+here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1002652|entityMap|0|LINK|mutability|MUTABLE|url|http://benalman.com/projects/jquery-hashchange-plugin/^0|T|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is a hashchange plug-in which wraps up the functionality and cross browser issues <a href="http://benalman.com/projects/jquery-hashchange-plugin/" rel="noreferrer">available here</a>.

blocks|key|1002767|text|用不同的方法来解决你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002768|有3种方法可以将hashchange事件绑定到方法：|1002769|<script>
++++window.onhashchange+=+doThisWhenTheHashChanges;
</script>|code-block|syntax|javascript|1002770|或|1002771|<script>
++++window.addEventListener("hashchange",+doThisWhenTheHashChanges,+false);
</script>|1002772|1002773|<body+onhashchange="doThisWhenTheHashChanges();">|1002774|这些都适用于Win7上的IE+9、FF+5、Safari+5和Chrome+12。|1002775|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|M|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

A different approach to your problem...

There are 3 ways to bind the hashchange event to a method:

<pre><code>&lt;script&gt;
 window.onhashchange = doThisWhenTheHashChanges;
&lt;/script&gt;
</code></pre>

Or

<pre><code>&lt;script&gt;
 window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
&lt;/script&gt;
</code></pre>

Or

<pre><code>&lt;body onhashchange="doThisWhenTheHashChanges();"&gt;
</code></pre>

These all work with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.

blocks|key|1217183|text|试用Mozilla官方网站：https://developer.mozilla.org/en/DOM/window.onhashchange|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1217184|引用如下：|1217185|if+("onhashchange"+in+window)+{
++++alert("The+browser+supports+the+hashchange+event!");
}

function+locationHashChanged()+{
++++if+(location.hash+===+"#somecoolfeature")+{
++++++++somecoolfeature();
++++}
}

window.onhashchange+=+locationHashChanged;|code-block|syntax|javascript|1217186|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/window.onhashchange^0|E|1K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

try Mozilla official site: <a href="https://developer.mozilla.org/en/DOM/window.onhashchange" rel="noreferrer">https://developer.mozilla.org/en/DOM/window.onhashchange</a>

cite as follow:

<pre class="lang-js prettyprint-override"><code>if ("onhashchange" in window) {
 alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
 if (location.hash === "#somecoolfeature") {
 somecoolfeature();
 }
}

window.onhashchange = locationHashChanged;
</code></pre>

blocks|key|1217084|text|请注意，在IE+7和IE+9的情况下，if语句将为真(在windows中为“onhashchange”)，但window.onhashchange永远不会触发，因此最好存储散列，并在每100毫秒后检查它是否对所有版本的IE都进行了更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1217085|++++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);
++++}|code-block|syntax|javascript|1217086|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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. 

<pre><code> if (("onhashchange" in window) &amp;&amp; !($.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);
 }
</code></pre>

blocks|key|1002924|text|我刚刚遇到了同样的问题(IE7中缺少hashchange事件)。一种适合我的解决方法是绑定散列更改链接的click事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002925|<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(/%5E#/,'');
++++++++//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(/%5E#/,'');
++++++++//do+whatever+you+need+with+the+hash
++++});

}

</script>|code-block|syntax|javascript|1002926|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>&lt;a class='hash-changer' href='#foo'&gt;Foo&lt;/a&gt;

&lt;script type='text/javascript'&gt;

if (("onhashchange" in window) &amp;&amp; !($.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
 });

}

&lt;/script&gt;
</code></pre>

blocks|key|1003224|text|用一种不同的方式代替hash事件并像这样监听popstate怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003225|window.addEventListener('popstate',+function(event)
{
++++if(window.location.hash)+{
++++++++++++var+hash+=+window.location.hash;
++++++++++++console.log(hash);
++++}
});|code-block|syntax|javascript|1003226|到目前为止，这个方法在我尝试过的大多数浏览器中都工作得很好。|1003227|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What about using a different way instead of the hash event and listen to popstate like.

<pre><code>window.addEventListener('popstate', function(event)
{
 if(window.location.hash) {
 var hash = window.location.hash;
 console.log(hash);
 }
});
</code></pre>

This method works fine in most browsers i have tried so far.

blocks|key|1003056|text|这个很小的jQuery插件非常容易使用：https://github.com/finnlabs/jquery.observehashchange/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1003057|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/finnlabs/jquery.observehashchange/^0|K|1H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

this tiny jQuery plugin is very simple to use: <a href="https://github.com/finnlabs/jquery.observehashchange/" rel="nofollow">https://github.com/finnlabs/jquery.observehashchange/</a>

blocks|key|1216999|text|我认为Chris+Coyier对这个散列问题有解决方案，看看他的截屏视频：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1217000|Best+Practices+with+Dynamic+Content|offset|length|1217001|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/^0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I think Chris Coyier has solution for that hashing problem, have a look at his screencast:

<a href="http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/" rel="nofollow noreferrer">Best Practices with Dynamic Content</a>

blocks|key|1217462|text|使用Modernizr检测功能。一般而言，jQuery提供了检测浏览器特性的功能：http://api.jquery.com/jQuery.support/。但是，hashchange不在列表中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1217463|wiki+of+Modernizr提供了一个库列表，用于向旧浏览器添加HTML5功能。该list+for+hashchange包含一个指向项目HTML5+History+API的指针，该项目似乎提供了在旧浏览器中模拟该行为所需的功能。|1217464|entityMap|0|LINK|mutability|MUTABLE|url|http://modernizr.com/|1|http://api.jquery.com/jQuery.support/|2|https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills|3|https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#html5-history-api-pushstate-replacestate-popstate|4|https://github.com/devote/HTML5-History-API^0|2|9|0|15|11|1|0|0|H|2|18|J|3|1Z|H|4|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]|$A|19|B|1A|1|1B]]|C|$]]|$1|F|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|S]]|T|$5|I|J|K|C|$L|U]]]]

Use <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> for detection of feature capabilities. In general jQuery offers to detect browser features: <a href="http://api.jquery.com/jQuery.support/" rel="nofollow">http://api.jquery.com/jQuery.support/</a>. However, hashchange is not on the list.

The <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills" rel="nofollow">wiki of Modernizr</a> offers a list of libraries to add HTML5 capabilities to old browsers. The <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#html5-history-api-pushstate-replacestate-popstate" rel="nofollow">list for hashchange</a> includes a pointer to the project <a href="https://github.com/devote/HTML5-History-API" rel="nofollow">HTML5 History API</a>, which seems to offer the functionality you would need if you wanted to emulate the behavior in old browsers.

blocks|key|1217504|text|这是@johnny.rodgers的更新版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1217505|希望能帮助别人。|1217506|//+ie9+ve+ie7+return+true+but+never+fire,+lets+remove+ie+less+then+10
if(("onhashchange"+in+window)+&&+navigator.userAgent.toLowerCase().indexOf('msie')+==+-1){+//+event+supported?
++++window.onhashchange+=+function(){
++++++++var+url+=+window.location.hash.substring(1);
++++++++alert(url);
++++}
}
else{+//+event+not+supported:
++++var+storedhash+=+window.location.hash;
++++window.setInterval(function(){
++++++++if(window.location.hash+!=+storedhash){
++++++++++++storedhash+=+window.location.hash;
++++++++++++alert(url);
++++++++}
++++},+100);
}|code-block|syntax|javascript|1217507|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here is updated version of @johnny.rodgers

Hope helps someone.

<pre><code>// ie9 ve ie7 return true but never fire, lets remove ie less then 10
if(("onhashchange" in window) &amp;&amp; navigator.userAgent.toLowerCase().indexOf('msie') == -1){ // event supported?
 window.onhashchange = function(){
 var url = window.location.hash.substring(1);
 alert(url);
 }
}
else{ // event not supported:
 var storedhash = window.location.hash;
 window.setInterval(function(){
 if(window.location.hash != storedhash){
 storedhash = window.location.hash;
 alert(url);
 }
 }, 100);
}
</code></pre>

I am using:

<pre><code>$(window).bind( 'hashchange', function(e) { });
</code></pre>

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 <code>hashchange</code> event. 

Is there a way with jQuery that i can detect if the browser supports the <code>hashchange</code> event? Maybe something with <code>jQuery.support</code>...

jQuery - hashchange event

jQuery

HTML5

我正在使用：$(window).bind( 'hashchange', function(e) { });将函数绑定到哈希更改事件。这似乎适用于IE8、火狐和Chrome浏览器，但不适用于Safari，我想也不适用于早期版本的IE。对于这些浏览器，我想禁用使用散列和hashchange事件的JavaScript代码。有没有一种方法可以让jQuery检测浏览器是否支持hashchange事件？也许是

问jQuery -哈希更改事件
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery -哈希更改事件EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery -哈希更改事件
EN