On - window.location.hash - Ändern?

Ich benutze Ajax und Hash für die Navigation.

Gibt es eine Möglichkeit zu überprüfen, ob sich das so window.location.hashgeändert hat?

http://example.com/blah # 123 bis http://example.com/blah # 456

Es funktioniert, wenn ich es beim Laden des Dokuments überprüfe.

Aber wenn ich eine # Hash-basierte Navigation habe, funktioniert dies nicht, wenn ich die Zurück-Taste im Browser drücke (also springe ich von bla # 456 zu bla # 123).

Es wird im Adressfeld angezeigt, aber ich kann es mit JavaScript nicht abfangen.

Der einzige Weg, dies wirklich zu tun (und so macht es die 'wirklich einfache Geschichte'), besteht darin, ein Intervall festzulegen, in dem der aktuelle Hash ständig überprüft und mit dem vorherigen verglichen wird. Wir tun dies und lassen Abonnenten eine Änderung abonnieren Ereignis, das wir auslösen, wenn sich der Hash ändert. Es ist nicht perfekt, aber Browser unterstützen dieses Ereignis nicht nativ.

Update, um diese Antwort aktuell zu halten:

Wenn Sie jQuery verwenden (was heute für die meisten etwas grundlegend sein sollte), besteht eine gute Lösung darin, die Abstraktion zu verwenden, die jQuery Ihnen bietet, indem Sie das Ereignissystem verwenden, um Hashchange-Ereignisse auf dem Fensterobjekt abzuhören.

$(window).on('hashchange', function() {
  //.. work ..
});

Das Schöne hier ist, dass Sie Code schreiben können, der sich nicht einmal um die Unterstützung von Hashchange kümmern muss. Sie müssen jedoch etwas Magie in Form einer etwas weniger bekannten jQuery-Funktion jQuery-Sonderereignisse ausführen .

Mit dieser Funktion können Sie im Wesentlichen Setup-Code für jedes Ereignis ausführen, wenn jemand zum ersten Mal versucht, das Ereignis auf irgendeine Weise zu verwenden (z. B. durch Bindung an das Ereignis).

In diesem Setup-Code können Sie nach nativer Browserunterstützung suchen. Wenn der Browser dies nicht nativ implementiert, können Sie einen einzelnen Timer einrichten, um nach Änderungen zu suchen und das jQuery-Ereignis auszulösen.

Das komplett entbindet Code aus , um diese Unterstützung Problem zu verstehen, die Durchführung einer besonderen Aktion Veranstaltung dieser Art trivial ist (eine einfache 98% Arbeitsversion zu bekommen), aber warum tun, wenn jemand anderes bereits hat .

HTML5 gibt ein hashchangeEreignis an . Dieses Ereignis wird jetzt von allen modernen Browsern unterstützt . Unterstützung wurde in den folgenden Browserversionen hinzugefügt:

• Internet Explorer 8
• Firefox 3.6
• Chrome 5
• Safari 5
• Opera 10.6

Beachten Sie, dass im Fall von Internet Explorer 7 und Internet Explorer 9 die ifAnweisung true angibt (für "onhashchange" in Windows), aber window.onhashchangeniemals ausgelöst wird. Es ist daher besser, Hash zu speichern und nach jeweils 100 Millisekunden zu überprüfen, ob er geändert wurde oder nicht für alle Versionen von Internet Explorer.

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

BEARBEITEN - Da jQuery 1.9 $.browser.msienicht unterstützt wird. Quelle: http://api.jquery.com/jquery.browser/

Es gibt viele Tricks, um mit Verlauf und window.location.hash in IE-Browsern umzugehen:

• Wie in der ursprünglichen Frage erwähnt, weiß der Browser nicht, dass sich diese Seite geändert hat, wenn Sie von Seite a.html # b zu a.html # c wechseln und dann auf die Schaltfläche "Zurück" klicken. Lassen Sie es mich mit einem Beispiel sagen: window.location.href ist 'a.html # c', egal ob Sie sich in a.html # b oder a.html # c befinden.

• Tatsächlich werden a.html # b und a.html # c nur dann im Verlauf gespeichert, wenn die Elemente '<a name="#b">' und '<a name="#c">' zuvor auf der Seite vorhanden sind.

• Wenn Sie jedoch einen Iframe in eine Seite einfügen, navigieren Sie in diesem Iframe von a.html # b zu a.html # c und klicken Sie dann auf die Schaltfläche "Zurück". Iframe.contentWindow.document.location.href ändert sich wie erwartet.

• Wenn Sie ‚document.domain = etwas ‘ in Ihrem Code, dann können Sie keinen Zugriff auf iframe.contentWindow.document.open ()‘(und viele History Manager das tut)

Ich weiß, dass dies keine echte Antwort ist, aber vielleicht sind IE-History-Notizen für jemanden nützlich.

Firefox hat seit 3.6 ein Onhashchange-Ereignis. Siehe window.onhashchange .

Ben Alman hat ein großartiges jQuery-Plugin, um damit umzugehen: http://benalman.com/projects/jquery-hashchange-plugin/

Wenn Sie jQuery nicht verwenden, ist dies möglicherweise eine interessante Referenz zum Präparieren.

Sie können problemlos einen Beobachter (die "watch" -Methode) für die "hash" -Eigenschaft des "window.location" -Objekts implementieren.

Firefox verfügt über eine eigene Implementierung zum Überwachen von Objektänderungen . Wenn Sie jedoch eine andere Implementierung verwenden (z. B. Änderungen der Objekteigenschaften in JavaScript überwachen ), reicht dies für andere Browser aus.

Der Code sieht folgendermaßen aus:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

Dann können Sie es testen:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

Und das wird natürlich Ihre Beobachterfunktion auslösen.

Ich habe dies in einer Reaktionsanwendung verwendet, damit die URL je nach Ansicht des Benutzers unterschiedliche Parameter anzeigt.

Ich habe den Hash-Parameter mit beobachtet

window.addEventListener('hashchange', doSomethingWithChangeFunction());

Dann

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

Arbeitete ein Vergnügen, arbeitet mit Vorwärts- und Rückwärts-Browser-Schaltflächen und auch im Browserverlauf.

Eine anständige Implementierung finden Sie unter http://code.google.com/p/reallysimplehistory/ . Das einzige (aber auch) Problem und der Fehler besteht darin, dass im Internet Explorer durch manuelles Ändern des Standort-Hashs der gesamte Verlaufsstapel zurückgesetzt wird (dies ist ein Browserproblem und kann nicht behoben werden).

Beachten Sie, dass Internet Explorer 8 das Ereignis "Hashchange" unterstützt. Da es Teil von HTML5 wird, können Sie davon ausgehen, dass andere Browser aufholen.

Eine weitere großartige Implementierung ist jQuery History, bei der das native onhashchange-Ereignis verwendet wird, wenn es vom Browser unterstützt wird. Andernfalls wird ein für den Browser geeigneter Iframe oder ein Intervall verwendet, um sicherzustellen, dass alle erwarteten Funktionen erfolgreich emuliert werden. Es bietet auch eine schöne Schnittstelle zum Binden an bestimmte Zustände.

Ein weiteres bemerkenswertes Projekt ist jQuery Ajaxy , eine Erweiterung für jQuery History, um dem Mix Ajax hinzuzufügen. Wie wenn Sie anfangen, Ajax mit Hashes zu verwenden, wird es ziemlich kompliziert !

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

Das war's ... jetzt wird die Seite jedes Mal, wenn Sie auf die Schaltfläche "Zurück" oder "Vorwärts" klicken, gemäß dem neuen Hashwert neu geladen.

Ich habe path.js für mein clientseitiges Routing verwendet. Ich habe festgestellt, dass es ziemlich prägnant und leicht ist (es wurde auch für NPM veröffentlicht) und verwendet die Hash-basierte Navigation.

path.js NPM

path.js GitHub

Ich habe ein jQuery-Plugin, HUtil , verwendet und darüber eine YUI History-ähnliche Oberfläche geschrieben.

Probieren Sie es einmal aus. Wenn Sie Hilfe brauchen, kann ich Ihnen helfen.