jQuery - Hashchange-Ereignis

Question 1

Ich benutze:

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

um eine Funktion an das Hash-Änderungsereignis zu binden. Dies scheint in IE8, Firefox und Chrome zu funktionieren, aber nicht in Safari, und ich gehe davon aus, dass dies nicht in früheren Versionen von IE der Fall ist. Für diese Browser möchte ich meinen JavaScript-Code deaktivieren, der den Hash und das hashchangeEreignis verwendet.

Gibt es eine Möglichkeit mit jQuery, die ich erkennen kann, ob der Browser das hashchangeEreignis unterstützt ? Vielleicht etwas mit jQuery.support...

Question 2

Sie können feststellen, ob der Browser das Ereignis unterstützt, indem Sie:

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

Siehe auch:

Question 3

Eine aktualisierte Antwort hier ab 2017, falls jemand sie benötigt, ist, dass onhashchangesie in allen gängigen Browsern gut unterstützt wird. Siehe caniuse für Details. Um es mit jQuery zu verwenden, wird kein Plugin benötigt:

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

Gelegentlich stoße ich auf Legacy-Systeme, in denen noch Hashbang-URLs verwendet werden, und dies ist hilfreich. Wenn Sie etwas Neues erstellen und Hash-Links verwenden, empfehlen wir Ihnen dringend, stattdessen die HTML5-PushState-API zu verwenden.

Question 4

Es gibt ein Hashchange-Plug-In, das die hier verfügbaren Funktionen und browserübergreifenden Probleme zusammenfasst .

Question 5

Eine andere Herangehensweise an Ihr Problem ...

Es gibt drei Möglichkeiten, das Hashchange-Ereignis an eine Methode zu binden:

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

Oder

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

Oder

<body onhashchange="doThisWhenTheHashChanges();">

Diese funktionieren alle mit IE 9, FF 5, Safari 5 und Chrome 12 unter Win 7.

Question 6

Probieren Sie die offizielle Mozilla-Website aus: https://developer.mozilla.org/en/DOM/window.onhashchange

zitiere wie folgt:

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

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

window.onhashchange = locationHashChanged;

Question 7

Ich bin gerade auf das gleiche Problem gestoßen (fehlendes Hashchange-Ereignis in IE7). Eine für meine Zwecke geeignete Problemumgehung bestand darin, das Klickereignis der Hash-ändernden Links zu binden.

<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

Beachten Sie, dass im Fall von IE 7 und IE 9 die Angabe true für ("onhashchange" in Windows) ergibt, window.onhashchange jedoch niemals ausgelöst wird. Daher ist es besser, Hash zu speichern und alle 100 Millisekunden zu überprüfen, ob es geändert wurde oder nicht für alle Versionen von 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

Was ist mit einer anderen Methode anstelle des Hash-Ereignisses und hören Sie Popstate wie.

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

Diese Methode funktioniert gut in den meisten Browsern, die ich bisher ausprobiert habe.

Question 10

Dieses winzige jQuery-Plugin ist sehr einfach zu verwenden: https://github.com/finnlabs/jquery.observehashchange/

Question 11

Ich denke, Chris Coyier hat eine Lösung für dieses Hashing-Problem. Schauen Sie sich seinen Screencast an:

Best Practices mit dynamischen Inhalten

Question 12

Verwenden Sie Modernizr zur Erkennung von Funktionsfunktionen. Im Allgemeinen bietet jQuery die Erkennung von Browserfunktionen an: http://api.jquery.com/jQuery.support/ . Hashchange ist jedoch nicht auf der Liste.

Das Wiki von Modernizr bietet eine Liste von Bibliotheken, mit denen Sie alten Browsern HTML5-Funktionen hinzufügen können. Die Liste für Hashchange enthält einen Zeiger auf die HTML5- Verlaufs- API des Projekts , die anscheinend die Funktionalität bietet, die Sie benötigen würden, wenn Sie das Verhalten in alten Browsern emulieren möchten.

Question 13

Hier ist die aktualisierte Version von @ johnny.rodgers

Hoffnung hilft jemandem.

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