87

我在用：

$(window).bind( 'hashchange', function(e) { });

将函数绑定到哈希更改事件。这似乎在 IE8、Firefox 和 Chrome 中有效，但在 Safari 中无效，我认为在早期版本的 IE 中无效。对于这些浏览器，我想禁用使用哈希和hashchange事件的 JavaScript 代码。

有没有办法使用 jQuery 来检测浏览器是否支持该hashchange事件？也许有什么jQuery.support...

4

12 回答 12

69

您可以通过以下方式检测浏览器是否支持该事件：

if ("onhashchange" in window) {
  //...
}

也可以看看：

于 2010-06-22T05:22:27.557 回答
41

截至 2017 年的更新答案是，如果有人需要，它onhashchange在所有主要浏览器中都得到了很好的支持。有关详细信息，请参阅caniuse。要在 jQuery 中使用它，不需要插件：

$( window ).on( 'hashchange', function( e ) {
    console.log( 'hash changed' );
} );

偶尔我会遇到仍然使用 hashbang URL 的遗留系统，这很有帮助。如果您正在构建新内容并使用哈希链接，我强烈建议您考虑改用 HTML5 pushState API。

于 2017-10-10T14:41:35.580 回答
18

解决您的问题的不同方法...

有 3 种方法可以将 hashchange 事件绑定到方法：

<script>
    window.onhashchange = doThisWhenTheHashChanges;
</script>

或者

<script>
    window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
</script>

或者

<body onhashchange="doThisWhenTheHashChanges();">

这些都适用于 Win 7 上的 IE 9、FF 5、Safari 5 和 Chrome 12。

于 2011-06-29T15:25:58.620 回答
18

有一个 hashchange 插件，它包含了这里可用的功能和跨浏览器问题。

于 2010-06-22T05:53:58.840 回答
8

试试 Mozilla 官方网站：https ://developer.mozilla.org/en/DOM/window.onhashchange

引用如下：

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

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

window.onhashchange = locationHashChanged;
于 2011-09-07T03:00:18.817 回答
3

我刚刚遇到了同样的问题（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>
于 2012-07-06T22:12:01.613 回答
3

请注意，在 IE 7 和 IE 9 的情况下，if statment 将为 ("onhashchange" in windows) 但 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);
    }
于 2011-06-28T15:27:13.187 回答
2

使用不同的方式而不是散列事件并收听 popstate 怎么样。

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

这种方法在我迄今为止尝试过的大多数浏览器中都可以正常工作。

于 2015-09-02T08:37:28.490 回答
1

这个小巧的 jQuery 插件使用起来非常简单：https ://github.com/finnlabs/jquery.observehashchange/

于 2012-08-08T06:50:33.617 回答
0

我认为 Chris Coyier 有解决散列问题的方法，看看他的截屏视频：

动态内容的最佳实践

于 2010-06-22T05:24:01.310 回答
0

这是@johnny.rodgers 的更新版本

希望能帮助某人。

// 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);
}
于 2015-04-15T12:18:22.450 回答
0

使用Modernizr检测特征能力。一般来说，jQuery 提供检测浏览器功能：http ://api.jquery.com/jQuery.support/ 。但是，hashchange 不在列表中。

Modernizr的wiki提供了一个库列表，用于向旧浏览器添加 HTML5 功能。hashchange的列表包括一个指向HTML5 History API项目的指针，如果您想在旧浏览器中模拟行为，它似乎提供了您需要的功能。

于 2013-05-09T10:06:51.203 回答