DieHistory API ermöglicht den Zugriff auf die Sitzungsverlauf des Browsers (nicht zu verwechseln mit demWebExtensions-Verlauf) über das globale Objekthistory. Sie stellt nützliche Methoden und Eigenschaften zur Verfügung, mit denen Sie im Verlauf des Benutzers vor- und zurücknavigieren und den Inhalt des Verlaufstapels manipulieren können.

Konzepte und Verwendung

Das Vorwärts- und Rückwärtsnavigieren im Verlauf des Benutzers erfolgt mit den Methodenback(),forward() undgo().

Vorwärts- und Rückwärtsbewegung

Um im Verlauf rückwärts zu navigieren:

history.back();

Diese Aktion entspricht genau dem Klick des Benutzers auf denZurück-Button in der Browser-Toolbar.

Sie können ebenso vorwärts navigieren (entspricht dem Klick des Benutzers auf denVorwärts-Button) wie folgt:

history.forward();

Navigation zu einem bestimmten Punkt im Verlauf

Sie können die Methodego() 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 ist0.)

Um eine Seite zurückzukehren (entspricht dem Aufruf vonback()):

history.go(-1);

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

history.go(1);

Ebenso können Sie zwei Seiten vorangehen, indem Sie2 übergeben, und so weiter.

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

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

Sie können die Anzahl der Seiten im Verlaufstapel ermitteln, indem Sie den Wert der Eigenschaftlength betrachten:

const numberOfEntries = history.length;

Schnittstellen

History

Ermöglicht 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 für daspopstate-Ereignis.

Beispiele

Das folgende Beispiel weist einen Listener für daspopstate-Ereignis zu. Es zeigt dann einige Methoden des Verlauf-Objekts, um den Verlauf des aktuellen Tabs hinzuzufügen, 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-Kompatibilität

Siehe auch

• Globales Objekthistory
• popstate-Ereignis