jQuery - hashchange事件

Question

我在用：

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

将函数绑定到散列更改事件。 这似乎适用于IE8，Firefox和Chrome，但不适用于Safari，我认为不是早期版本的IE。 对于这些浏览器，我想禁用使用hash和hashchange事件的JavaScript代码。

有没有一种方法可以检测浏览器是否支持hashchange事件？ 也许与jQuery.support ...

Answer 1

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

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

也可以看看：

Answer 2

如果有人需要，2017年的更新答案是，所有主流浏览器都支持onhashchange 。 有关详细信息，请参阅caniuse 。 要与jQuery一起使用，不需要插件：

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

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

Answer 3

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

Answer 4

解决问题的另一种方法......

有三种方法可以将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。

Answer 5

试试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;

Answer 6

我刚遇到同样的问题（在IE7中缺少hashchange事件）。 适合我的目的的解决方法是绑定哈希更改链接的click事件。

<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>

Answer 7

如何使用不同的方式而不是哈希事件，并听取popstate之类的。

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

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

Answer 8

请注意，在IE 7和IE 9的情况下，如果statment将给出true（Windows中的“onhashchange”），但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);
    }

Answer 9

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

Answer 10

使用Modernizr检测功能。 通常，jQuery提供检测浏览器功能： http ： //api.jquery.com/jQuery.support/ 。 但是，hashchange不在列表中。

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

Answer 11

这是@ 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);
}

Answer 12

我认为Chris Coyier有解决这个哈希问题的方法，看看他的截屏视频：

动态内容的最佳实践

jQuery - hashchange事件

问题描述

12 个解决方案

解决方案1
68 2010-06-22 05:22:27

解决方案2
30 2017-10-10 14:41:35

解决方案3
18 2010-06-22 05:53:58

解决方案4
18 2011-06-29 15:25:58

解决方案5
7 2011-09-07 03:00:18

解决方案6
3 2012-07-06 22:12:01

解决方案7
2 2015-09-02 08:37:28

解决方案8
2 2011-06-28 15:27:13

解决方案9
1 2012-08-08 06:50:33

解决方案10
0 2013-05-09 10:06:51

解决方案11
0 2015-04-15 12:18:22

解决方案12
0 2010-06-22 05:24:01

jQuery - hashchange事件

问题描述

12 个解决方案

解决方案1 68 2010-06-22 05:22:27

解决方案2 30 2017-10-10 14:41:35

解决方案3 18 2010-06-22 05:53:58

解决方案4 18 2011-06-29 15:25:58

解决方案5 7 2011-09-07 03:00:18

解决方案6 3 2012-07-06 22:12:01

解决方案7 2 2015-09-02 08:37:28

解决方案8 2 2011-06-28 15:27:13

解决方案9 1 2012-08-08 06:50:33

解决方案10 0 2013-05-09 10:06:51

解决方案11 0 2015-04-15 12:18:22

解决方案12 0 2010-06-22 05:24:01

解决方案1
68 2010-06-22 05:22:27

解决方案2
30 2017-10-10 14:41:35

解决方案3
18 2010-06-22 05:53:58

解决方案4
18 2011-06-29 15:25:58

解决方案5
7 2011-09-07 03:00:18

解决方案6
3 2012-07-06 22:12:01

解决方案7
2 2015-09-02 08:37:28

解决方案8
2 2011-06-28 15:27:13

解决方案9
1 2012-08-08 06:50:33

解决方案10
0 2013-05-09 10:06:51

解决方案11
0 2015-04-15 12:18:22

解决方案12
0 2010-06-22 05:24:01