Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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 srpingen

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 Grösse des Verlaufes kann mithilfe der Eigenschaft length bestimmt werden:

let verlauftiefe = window.history.length;
Anmerkung: Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für 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-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

Man nehme an, 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 einemStatus-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.

The pushState() method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:

  • state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

    The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.

  • title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

  • URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

In a sense, calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

  • The new URL can be any URL in the same origin as the current URL. In contrast, setting window.location keeps you at the same document only if you modify only the hash.
  • You don't have to change the URL if you don't want to. In contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo.
  • You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.

Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

The replaceState() method

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

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 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 ? ? ? ? ?

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Zuletzt aktualisiert von: daniel-evers,