History API

Konzepte und Verwendung

Das Vorwrts- und Rckwrtsnavigieren im Verlauf des Benutzers erfolgt mit den Methoden back(), forward() und go().

Vorwrts- und Rckwrtsbewegung

Um im Verlauf rckwrts zu navigieren:

history.back();

Diese Aktion entspricht genau dem Klick des Benutzers auf den Zurck-Button in der Browser-Toolbar.

Sie knnen ebenso vorwrts navigieren (entspricht dem Klick des Benutzers auf den Vorwrts-Button) wie folgt:

history.forward();

Navigation zu einem bestimmten Punkt im Verlauf

Sie knnen die Methode go() verwenden, um eine bestimmte Seite aus dem Sitzungsverlauf zu laden, die durch ihre relative Position zur aktuellen Seite identifiziert wird. (Die relative Position der aktuellen Seite ist 0.)

Um eine Seite zurckzukehren (entspricht dem Aufruf von back()):

history.go(-1);

Um eine Seite nach vorne zu gehen, wie beim Aufruf von forward():

history.go(1);

Ebenso knnen Sie zwei Seiten vorangehen, indem Sie 2 bergeben, und so weiter.

Eine weitere Verwendung der go()-Methode besteht darin, die aktuelle Seite zu aktualisieren, indem 0 bergeben wird oder indem sie ohne Argument aufgerufen wird:

// The following statements
// both have the effect of
// refreshing the page
history.go(0);
history.go();

Sie knnen die Anzahl der Seiten im Verlaufstapel ermitteln, indem Sie den Wert der Eigenschaft length betrachten:

const numberOfEntries = history.length;

Schnittstellen

History

Ermglicht die Manipulation der Browser-Sitzungsverlauf (also der Seiten, die im Tab oder Frame besucht wurden, in dem die aktuelle Seite geladen ist).

PopStateEvent

Die Schnittstelle fr das popstate-Ereignis.

Beispiele

Das folgende Beispiel weist einen Listener fr das popstate-Ereignis zu. Es zeigt dann einige Methoden des Verlauf-Objekts, um den Verlauf des aktuellen Tabs hinzuzufgen, zu ersetzen und innerhalb zu verschieben.

window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Globales Objekt history
• popstate-Ereignis