Ich benutze Ajax und Hash für die Navigation.
Gibt es eine Möglichkeit zu überprüfen, ob sich das so window.location.hash
geä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.
Antworten:
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.
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 .
quelle
hashchange
löst WebKit auch ein Ereignis aus, während Safari (stabil) dies noch nicht tut.hashchange
Veranstaltung jetzt weitgehend unterstützt: caniuse.com/#search=hashHTML5 gibt ein
hashchange
Ereignis an . Dieses Ereignis wird jetzt von allen modernen Browsern unterstützt . Unterstützung wurde in den folgenden Browserversionen hinzugefügt:quelle
window.onhashchange = function() { doYourStuff(); }
Beachten Sie, dass im Fall von Internet Explorer 7 und Internet Explorer 9 die
if
Anweisung true angibt (für "onhashchange" in Windows), aberwindow.onhashchange
niemals 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.BEARBEITEN - Da jQuery 1.9
$.browser.msie
nicht unterstützt wird. Quelle: http://api.jquery.com/jquery.browser/quelle
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.
quelle
Firefox hat seit 3.6 ein Onhashchange-Ereignis. Siehe window.onhashchange .
quelle
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.
quelle
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:
Dann können Sie es testen:
Und das wird natürlich Ihre Beobachterfunktion auslösen.
quelle
watch
auf das Objekt anwenden , dem die sich ändernde Eigenschaft gehört, und Sie möchten sie beobachten.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
Dann
Arbeitete ein Vergnügen, arbeitet mit Vorwärts- und Rückwärts-Browser-Schaltflächen und auch im Browserverlauf.
quelle
addEventListener
Anruf sollten Sie die()
vondoSomethingWithChangeFunction
()
. Für dieaddEventListener
Funktion müssen Sie eine Funktion übergeben.doSomethingWithChangeFunction
ist eine Funktion.doSomethingWithChangeFunction()
ist der Rückgabewert dieser Funktion, die in diesem Fall keine Funktion ist.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.
quelle
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 !
quelle
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.
quelle
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
quelle
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.
quelle