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

Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden back(), forward() und go().

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

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;

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.

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.

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 ein popstate-Event ausgelöst. Die state-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 an pushState() übergeben, gibt die Methode eine Exception aus. Wenn mehr Speicherplatz benötigt wird, sollte sessionStorage und/oder localStorage 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 gibt pushState() 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 bleibt window.location nur dann im selben document selbst wenn man nur den hash ändert.
• Man muss nicht die URL ändern, wenn man nicht will. 
  Im Gegensatz dazu erzeugt window.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.

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.

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.

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.

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;

For a complete example of AJAX web site, please see: Ajax navigation example.

• window.history
• window.onpopstate (en-US)