Manipulieren des Browser-Verlaufes
Das DOM window
Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das history
Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren
Durch den Verlauf gehen
Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden back()
, forward()
und go()
.
Vor und zurück bewegen
Um im Verlauf zurück zu navigieren, nutze:
window.history.back();
Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.
Auf ähnliche Weise kann so vorwärts navigiert werden:
window.history.forward();
An einen bestimmten Punkt im Verlauf springen
Mit der Methode go()
ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.
Um eine Seite rückwärts zu gehen (äquivalent zu back()
):
window.history.go(-1);
Um eine Seite vorwärts zu gehen (äquivalent zu forward()
):
window.history.go(1);
Gleichermassen ist es möglich, 2 Seiten vorwärts mit go(2)
zu gehen, 3 rückwärts mit go(-3)
und so weiter.
Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft length
bestimmt werden:
var numberOfEntries = window.history.length;
go()
; dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.Hinzufügen und Ändern von Verlaufseinträgen
Mit HTML5 wurden die Methoden history.pushState()
und history.replaceState()
eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem window.onpopstate
(en-US)-Event.
Wenn history.pushState()
benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten XMLHttpRequest
-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster this
zur Zeit der Erstellung des XMLHttpRequest
-Objektes ist.
Beispiel für die pushState()-Methode
Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "seite 2", "bar.html");
Das ändert die angezeigte URL zu http://mozilla.org/bar.html, bringt den Browser aber nicht dazu, bar.html
zu laden oder überhaupt dessen Existenz zu überprüfen.
Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein popstate
-Event mit einem Status-Objekt, das eine Kopie von stateObj
darstellt. Die Seite selbst wird aussehen wie foo.html
, aber während dem popstate
-Event kann der Inhalt bearbeitet worden sein.
Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu http://mozilla.org/foo.html, und die Seite erhält ein weiteres popstate
-Event, dieses Mal mit einem null
Status-Objekt. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im popstate
-Event vollzogen wird.
Die pushState()-Methode
pushState()
übernimmt drei Parameter: ein state Objekt, einen title (welcher aktuell noch ignoriert wird), und (optional) eine URL. Betrachten wir die einzelnen Parameter genauer:
-
state-Objekt — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per
pushState()
neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird einpopstate
-Event ausgelöst. Diestate
-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.
Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt anpushState()
übergeben, gibt die Methode eine Exception aus. Wenn mehr Speicherplatz benötigt wird, solltesessionStorage
und/oderlocalStorage
verwendet werden. -
title — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.
-
URL — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von
pushState()
diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibtpushState()
eine Exception zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des documents gesetzt.
In gewissem Sinne ist der Aufruf von pushState()
ähnlich dem Setzen von window.location = "#foo"
, insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber pushState()
hat ein paar Vorteile:
- Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.
Im Gegensatz dazu bleibtwindow.location
nur dann im selbendocument
selbst wenn man nur den hash ändert. - Man muss nicht die URL ändern, wenn man nicht will.
Im Gegensatz dazu erzeugtwindow.location = "#foo";
nur dann einen neuen history-Eintrag, wenn der aktuelle hash nicht#foo
ist.- Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem hash-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.
Man beachte, dass pushState()
niemals das Auslösen eines hashchange
-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren hash unterscheidet.
Die replaceState()-Methode
history.replaceState()
arbeitet genauso wie history.pushState()
, abgesehen davon, dass replaceState()
den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.
replaceState()
ist insbesondere nützlich, um das Status-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.
Beispiel für die replaceState()-Methode
Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:
history.replaceState(stateObj, "page 3", "bar2.html");
Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht bar2.html
laden oder auch nur prüfen, ob bar2.html
existiert.
Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.
The popstate event
A popstate
event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState
or affected by a call to replaceState
, the popstate
event's state
property contains a copy of the history entry's state object.
See window.onpopstate
(en-US) for sample usage.
Reading the current state
When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState()
or replaceState()
) and then the user restarts her browser. When your page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.
You can read the state of the current history entry without waiting for a popstate
event using the history.state
property like this:
var currentState = history.state;
Examples
For a complete example of AJAX web site, please see: Ajax navigation example.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
replaceState, pushState | 5 | 4.0 (2.0) | 10 | 11.50 | 5.0 |
history.state | 18 | 4.0 (2.0) | 10 | 11.50 | 6.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
replaceState, pushState | ? | ? | ? | ? | ? |
history.state | ? | ? | ? | ? | ? |