web-dev-qa-db-fra.com

jQuery - événement hashchange

J'utilise:

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

pour lier une fonction à l'événement de changement de hachage. Cela semble fonctionner dans IE8, Firefox et Chrome, mais pas dans Safari et, je suppose, pas dans les versions antérieures d’IE. Pour ces navigateurs, je souhaite désactiver mon code JavaScript utilisant les événements de hachage et hashchange.

Existe-t-il un moyen avec jQuery de détecter si le navigateur prend en charge l'événement hashchange? Peut-être quelque chose avec jQuery.support...

javascriptjqueryhashchangebrowser-state
82
Ian Herbert

Vous pouvez détecter si le navigateur prend en charge l'événement en:

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

Voir également:

68
CMS

Une réponse mise à jour ici à partir de 2017, si quelqu'un en avait besoin, est que onhashchange est bien pris en charge par tous les principaux navigateurs. Voir caniuse pour plus de détails. Pour l'utiliser avec jQuery, aucun plugin n'est nécessaire:

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

Parfois, je rencontre des systèmes hérités dans lesquels des URL hashbang sont encore utilisées, ce qui est utile. Si vous construisez quelque chose de nouveau et utilisez des liens de hachage, je vous suggère fortement d'utiliser plutôt l'API pushState HTML5.

30
Kevin Leary

Une approche différente de votre problème ...

Il existe 3 façons de lier l'événement hashchange à une méthode:

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

Ou

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

Ou

<body onhashchange="doThisWhenTheHashChanges();">

Celles-ci fonctionnent toutes avec IE 9, FF 5, Safari 5 et Chrome 12 sur Win 7.

18
james.garriss

Il existe un plug-in de hachage qui résume les problèmes de fonctionnalité et de navigation croisée disponible ici .

18
James Westgate

essayez le site officiel de Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

citer comme suit:

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

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

window.onhashchange = locationHashChanged;
7
Paul Lan

Je viens de rencontrer le même problème (manque d'événement hashchange dans IE7). Une solution de contournement adaptée à mes besoins était de lier l'événement click des liens qui changent de hachage.

<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>
3
johnny.rodgers

Notez que dans le cas de IE 7 et IE 9 si l'instruction donnera true pour ("onhashchange" dans Windows)) mais que le window.onhashchange ne se déclenchera jamais, il est donc préférable de stocker hash et de le vérifier toutes les 100 millisecondes, que cela change ou non pour toutes les versions d'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);
    }
2
Khan Salahuddin

Qu'en est-il d'utiliser une manière différente au lieu de l'événement de hachage et d'écouter popstate comme.

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

Cette méthode fonctionne bien dans la plupart des navigateurs que j'ai essayés jusqu'à présent.

2
Sven van den Boogaart

ce petit plugin jQuery est très simple à utiliser: https://github.com/finnlabs/jquery.observehashchange/

1
Morteza Ziyae

Je pense que Chris Coyier a une solution à ce problème de hachage, jetez un coup d'œil à son screencast:

Meilleures pratiques avec contenu dynamique

0
Sarfraz

Voici la version mise à jour de @ johnny.rodgers

Hope aide quelqu'un.

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

Utilisez Modernizr pour la détection des fonctionnalités. En général, jQuery propose de détecter les fonctionnalités du navigateur: http://api.jquery.com/jQuery.support/ . Cependant, hashchange n'est pas sur la liste.

Le wiki of Modernizr propose une liste de bibliothèques permettant d’ajouter des fonctionnalités HTML5 aux anciens navigateurs. Le liste pour hashchange inclut un pointeur sur le projet HTML5 History API , qui semble offrir les fonctionnalités dont vous auriez besoin si vous vouliez émuler le comportement des anciens navigateurs.

0
koppor