DasNavigation-Interface derNavigation API ermöglicht die Steuerung aller Navigationsaktionen für das aktuellewindow an einem zentralen Ort, einschließlich der programmatischen Initiierung von Navigationen, der Untersuchung von Navigationseinträgen in der Historie und der Verwaltung von Navigationen, während sie geschehen.

Es wird über dieWindow.navigation Eigenschaft aufgerufen.

Die Navigation API zeigt nur die Verlaufseinträge an, die im aktuellen Browsing-Kontext erstellt wurden und denselben Ursprung wie die aktuelle Seite haben (z.B. keine Navigationen innerhalb von eingebetteten<iframe>s oder Cross-Origin-Navigationen), und liefert eine genaue Liste aller vorherigen Verlaufseinträge nur für Ihre App. Dies macht das Durchlaufen des Verlaufs zu einem weitaus weniger anfälligen Vorhaben als mit der älterenHistory API.

Instanz-Eigenschaften

Erbt Eigenschaften von ihrem Elternteil,EventTarget.

activationSchreibgeschützt

Gibt einNavigationActivation-Objekt zurück, das Informationen über die letzte Cross-Dokument-Navigation enthält, die dieses Dokument "aktiviert" hat.

canGoBackSchreibgeschützt

Gibttrue zurück, wenn es möglich ist, im Navigationsverlauf zurückzublättern(d.h. dercurrentEntry ist nicht der erste Eintrag in der Verlaufsliste),undfalse, wenn dies nicht der Fall ist.

canGoForwardSchreibgeschützt

Gibttrue zurück, wenn es möglich ist, im Navigationsverlauf vorwärts zu blättern(d.h. dercurrentEntry ist nicht der letzte Eintrag in der Verlaufsliste),undfalse, wenn dies nicht der Fall ist.

currentEntrySchreibgeschützt

Gibt einNavigationHistoryEntry-Objekt zurück, das den Standort darstellt, zu dem der Benutzer aktuell navigiert ist.

transitionSchreibgeschützt

Gibt einNavigationTransition-Objekt zurück, das den Status einer laufenden Navigation darstellt,das zur Verfolgung verwendet werden kann. Gibtnull zurück, wenn keine Navigation in Bearbeitung ist.

Instanz-Methoden

Erbt Methoden von ihrem Elternteil,EventTarget.

back()

Navigiert um einen Eintrag im Navigationsverlauf zurück.

entries()

Gibt ein Array vonNavigationHistoryEntry-Objekten zurück, die alle vorhandenen Verlaufsobjekte darstellen.

forward()

Navigiert um einen Eintrag im Navigationsverlauf vorwärts.

navigate()

Navigiert zu einer bestimmten URL, wobei alle bereitgestellten Zustände in der Verlaufsliste aktualisiert werden.

reload()

Lädt die aktuelle URL neu und aktualisiert alle bereitgestellten Zustände in der Verlaufsliste.

traverseTo()

Navigiert zu einem bestimmtenNavigationHistoryEntry, identifiziert durchkey.

updateCurrentEntry()

Aktualisiert den Zustand descurrentEntry; verwendetin Fällen, wo die Zustandsänderung unabhängig von einer Navigation oder einem Reload sein wird.

Ereignisse

Erbt Ereignisse von ihrem Elternteil,EventTarget.

currententrychange

Wird ausgelöst, wenn sich dieNavigation.currentEntry geändert hat.

navigate

Wird ausgelöst, wennjede Art von Navigation initiiert wird, wodurch Sie den Ablauf nach Bedarf abfangen können.

navigateerror

Wird ausgelöst, wenn eine Navigation fehlschlägt.

navigatesuccess

Wird ausgelöst, wenn eine erfolgreiche Navigation abgeschlossen ist.

Beispiele

Vorwärts- und Rückwärtsbewegen im Verlauf

async function backHandler() {  if (navigation.canGoBack) {    await navigation.back().finished;    // Handle any required clean-up after    // navigation has finished  } else {    displayBanner("You are on the first page");  }}async function forwardHandler() {  if (navigation.canGoForward) {    await navigation.forward().finished;    // Handle any required clean-up after    // navigation has finished  } else {    displayBanner("You are on the last page");  }}

Zu einem bestimmten Verlaufseintrag navigieren

// On JS startup, get the key of the first loaded page// so the user can always go back there.const { key } = navigation.currentEntry;backToHomeButton.onclick = () => navigation.traverseTo(key);// Navigate away, but the button will always work.await navigation.navigate("/another_url").finished;

Navigieren und Zustand aktualisieren

navigation.navigate(url, { state: newState });

Oder

navigation.reload({ state: newState });

Oder wenn der Zustand unabhängig von einer Navigation oder einem Reload ist:

navigation.updateCurrentEntry({ state: newState });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Moderne clientseitige Routenführung: die Navigation API
• Navigation API Erklärung
• Navigation API Live-Demo (Demo-Quellcode ansehen)