Wie kann ich Änderungen des Standort-Hashes erkennen?

Question

Ich verwende Ajax und Hash für die Navigation.

Gibt es eine Möglichkeit zu prüfen, ob die window.location.hash so verändert?

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

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

Aber wenn ich eine #hash-basierte Navigation habe, funktioniert sie nicht, wenn ich die Zurück-Taste des Browsers drücke (ich springe also von blah#456 zu blah#123).

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

Answer 1

Die einzige Möglichkeit, dies wirklich zu tun (und ist, wie die 'reallysimplehistory' dies tut), ist durch die Einstellung eines Intervalls, das die aktuelle Hash zu überprüfen hält, und vergleicht es gegen das, was es vorher war, wir tun dies und lassen Abonnenten zu einem geänderten Ereignis, das wir Feuer, wenn die Hash-Änderungen abonnieren. seine nicht perfekt, aber Browser wirklich nicht unterstützen dieses Ereignis nativ.

---

Aktualisieren Sie diese Antwort, um sie aktuell zu halten:

Wenn Sie mit jQuery (die heute sollte etwas grundlegend für die meisten) dann eine schöne Lösung ist die Abstraktion, die jQuery gibt Ihnen durch die Verwendung seiner Ereignisse System zu hören, um Hashchange-Ereignisse auf dem Fenster-Objekt zu verwenden.

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

Das Schöne daran ist, dass Sie Code schreiben können, der sich nicht einmal um die Unterstützung von Hashchange kümmern muss, aber Sie müssen etwas Magie in Form einer etwas weniger bekannten jQuery-Funktion anwenden jQuery besondere Ereignisse .

Mit dieser Funktion können Sie im Wesentlichen einen Einrichtungscode für jedes Ereignis ausführen, wenn jemand zum ersten Mal versucht, das Ereignis in irgendeiner Weise zu verwenden (z. B. durch Bindung an das Ereignis).

In diesem Einrichtungscode können Sie prüfen, ob der Browser diese Funktion unterstützt. Wenn der Browser diese Funktion nicht unterstützt, können Sie einen einzelnen Timer einrichten, der auf Änderungen wartet und das jQuery-Ereignis auslöst.

Dies entbindet Ihren Code vollständig von der Notwendigkeit, dieses Unterstützungsproblem zu verstehen. Die Implementierung eines speziellen Ereignisses dieser Art ist trivial (um eine einfache, zu 98% funktionierende Version zu erhalten), aber warum sollte man das tun? wenn jemand anderes bereits .

Answer 2

HTML5 spezifiziert eine hashchange Veranstaltung . Dieses Ereignis ist jetzt unterstützt von allen modernen Browsern . Die Unterstützung wurde in den folgenden Browser-Versionen hinzugefügt:

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

Answer 3

Beachten Sie, dass im Falle von Internet Explorer 7 und Internet Explorer 9 die if Anweisung ergibt true (für "onhashchange" in Windows), aber die window.onhashchange wird nie ausgelöst, daher ist es besser, den Hash zu speichern und alle 100 Millisekunden zu überprüfen, ob er sich für alle Versionen des Internet Explorer geändert hat oder nicht.

    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 - Seit jQuery 1.9, $.browser.msie wird nicht unterstützt. Quelle: http://api.jquery.com/jquery.browser/

Answer 4

Ich habe dies in einer React-Anwendung verwendet, um die URL-Anzeige unterschiedliche Parameter, je nachdem, welche Ansicht der Benutzer auf war zu machen.

Ich habe den Hash-Parameter mit

window.addEventListener('hashchange', doSomethingWithChangeFunction);

Entonces

function doSomethingWithChangeFunction () {
    let urlParam = window.location.hash; // Get new hash value

    // ... Do something with new hash value
};

Funktioniert prima, funktioniert mit den Browser-Schaltflächen "Vor" und "Zurück" und auch im Browserverlauf.

Answer 5

Es gibt eine Reihe von Tricks für den Umgang mit History und window.location.hash in IE-Browsern:

• Wie die ursprüngliche Frage besagt, weiß der Browser nicht, dass sich die 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 wird 'a.html#c' sein, egal ob Sie in a.html#b oder a.html#c sind.

• Tatsächlich werden a.html#b und a.html#c in der Historie gespeichert nur wenn die Elemente '<a name="#b">' und '<a name="#c">' bereits auf der Seite vorhanden sind.

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

• Wenn Sie 'document.domain=' verwenden etwas ' in Ihrem Code, dann können Sie nicht auf iframe.contentWindow.document.open()' zugreifen (und viele History-Manager tun das)

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