jQuery - evento hashchange

Question 1

Estou usando:

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

para vincular uma função ao evento de mudança de hash. Isso parece funcionar no IE8, Firefox e Chrome, mas não no Safari e presumo que não na versão anterior do IE. Para esses navegadores, desejo desabilitar meu código JavaScript que usa o hash e o hashchangeevento.

Existe uma maneira com o jQuery que posso detectar se o navegador oferece suporte ao hashchangeevento? Talvez algo com jQuery.support...

Question 2

Você pode detectar se o navegador oferece suporte ao evento:

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

Veja também:

Question 3

Uma resposta atualizada aqui a partir de 2017, caso alguém precise, é que onhashchangeé bem suportado em todos os principais navegadores. Veja caniuse para detalhes. Para usá-lo com jQuery, nenhum plugin é necessário:

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

Ocasionalmente, encontro sistemas legados onde URLs hashbang ainda são usados e isso é útil. Se você estiver construindo algo novo e usando links hash, eu sugiro que você considere usar a API pushState HTML5.

Question 4

Há um plug-in hashchange que encerra a funcionalidade e os problemas entre navegadores disponíveis aqui .

Question 5

Uma abordagem diferente para o seu problema ...

Existem 3 maneiras de vincular o evento hashchange a um método:

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

Ou

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

Ou

<body onhashchange="doThisWhenTheHashChanges();">

Todos eles funcionam com IE 9, FF 5, Safari 5 e Chrome 12 no Win 7.

Question 6

experimente o site oficial da Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

cite o seguinte:

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

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

window.onhashchange = locationHashChanged;

Question 7

Acabei de ter o mesmo problema (falta de evento hashchange no IE7). Uma solução alternativa adequada aos meus objetivos era vincular o evento click dos links de alteração de hash.

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

Question 8

Observe que, no caso do IE 7 e do IE 9, se a instrução for verdadeira para ("onhashchange" no Windows), mas o window.onhashchange nunca será acionado, então é melhor armazenar o hash e verificar a cada 100 milissegundos se ele foi alterado ou não para todas as versões do 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);
    }

Question 9

Que tal usar uma maneira diferente em vez do evento hash e ouvir popstate como.

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

Este método funciona bem na maioria dos navegadores que experimentei até agora.

Question 10

este minúsculo plugin jQuery é muito simples de usar: https://github.com/finnlabs/jquery.observehashchange/

Question 11

Acho que Chris Coyier tem a solução para esse problema de hash, dê uma olhada em seu screencast:

Melhores práticas com conteúdo dinâmico

Question 12

Use Modernizr para detecção de recursos de recursos. Em geral, o jQuery oferece para detectar recursos do navegador: http://api.jquery.com/jQuery.support/ . No entanto, hashchange não está na lista.

O wiki da Modernizr oferece uma lista de bibliotecas para adicionar recursos HTML5 a navegadores antigos. A lista de hashchange inclui um ponteiro para a API HTML5 History do projeto , que parece oferecer a funcionalidade de que você precisa se quiser emular o comportamento em navegadores antigos.

Question 13

Aqui está a versão atualizada de @ johnny.rodgers

A esperança ajuda alguém.

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