jQuery-hashchange事件

86

我在用：

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

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

jQuery是否可以检测浏览器是否支持该hashchange事件？也许与jQuery.support...

— 伊恩·赫伯特
source

4

jQuery hashchange事件-jQuery插件即使在IE8中也可以正常运行。+使用起来非常容易:)

— enloz 2011年

69

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

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

也可以看看：

— 克里斯蒂安·C·萨尔瓦多
source

谢谢您的回复和快速的回复。

— 伊恩·赫伯特

19

请注意，即使不支持该事件，以IE7兼容模式运行的IE8也会在窗口中报告“ onhashchange”为真-来自jQuery Mobile

— Vikas，

35

如果有人需要的话，截至2017年的最新答案是，onhashchange所有主要浏览器均已很好地支持该答案。有关详细信息，请参见caniuse。要将其与jQuery一起使用，无需插件：

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

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

— 凯文·李瑞
source

2

这很好用，window.location.hash用于访问当前哈希。

— 丹尼尔·德赫斯特

18

有一个hashchange插件，它封装了功能性和跨浏览器的问题，可在这里。

— 詹姆斯·韦斯特盖特
source

仅适用于<IE8

— James Westgate

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一起使用。

— 詹姆斯·加里斯
source

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;

— 保罗·兰
source

3

我遇到了同样的问题（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>

— 约翰尼·罗杰斯
source

1

您可以使用$('a[href^="#"]')获取以href散列开头的s的链接，而无需添加类

— tobymackenzie

2

请注意，在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);
    }

— 汗·萨拉胡丁（Khan Salahuddin）
source

2

这对浏览器来说不是太多吗？每100毫秒轮询一次哈希变化？

— 2011年

5

您的示例代码使我的IE8发出警报，直到我打开任务管理器并

— 终止了

那是因为有一个错字，而不是“ storedHash”使用“ prevHash”，它将起作用。他基本上使用了与声明变量不同的变量名。

— 尼克

2

用不同的方式代替hash事件并听popstate之类的事情呢。

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

到目前为止，我在大多数浏览器中都使用过这种方法。

— 斯文·范·登·博加特
source

1

Popstate比hashchange更新。例如，它不是在IE <10支承

— 阿图罗托雷斯桑切斯

1

这个小巧的jQuery插件非常易于使用：https：//github.com/finnlabs/jquery.observehashchange/

— 莫尔蒂扎·兹耶（Morteza Ziyae）
source

0

我认为Chris Coyier有解决该哈希问题的方法，请看一下他的截屏视频：

动态内容的最佳做法

— 萨夫拉兹
source

谢谢，我会调查一下。

— 伊恩·赫伯特

0

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

Modernizr的Wiki提供了一个库列表，以向旧的浏览器添加HTML5功能。该用于hashchange列表包含一个指向该项目HTML5纪录API，它似乎提供，如果你想仿效旧的浏览器的行为，你需要的功能。

— Koppor
source

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);
}

— 德尼兹·波苏克（Deniz Porsuk）
source