Navigation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das Navigation-Interface der Navigation API ermöglicht die Steuerung aller Navigationsaktionen für das aktuelle window 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 die Window.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 älteren History API.

Instanz-Eigenschaften

Erbt Eigenschaften von ihrem Elternteil, EventTarget.

activation Schreibgeschützt: Gibt ein NavigationActivation-Objekt zurück, das Informationen über die letzte Cross-Dokument-Navigation enthält, die dieses Dokument "aktiviert" hat.
canGoBack Schreibgeschützt: Gibt true zurück, wenn es möglich ist, im Navigationsverlauf zurückzublättern (d.h. der currentEntry ist nicht der erste Eintrag in der Verlaufsliste), und false, wenn dies nicht der Fall ist.
canGoForward Schreibgeschützt: Gibt true zurück, wenn es möglich ist, im Navigationsverlauf vorwärts zu blättern (d.h. der currentEntry ist nicht der letzte Eintrag in der Verlaufsliste), und false, wenn dies nicht der Fall ist.
currentEntry Schreibgeschützt: Gibt ein NavigationHistoryEntry-Objekt zurück, das den Standort darstellt, zu dem der Benutzer aktuell navigiert ist.
transition Schreibgeschützt: Gibt ein NavigationTransition-Objekt zurück, das den Status einer laufenden Navigation darstellt, das zur Verfolgung verwendet werden kann. Gibt null 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 von NavigationHistoryEntry-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 bestimmten NavigationHistoryEntry, identifiziert durch key.
updateCurrentEntry(): Aktualisiert den Zustand des currentEntry; verwendet in 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 die Navigation.currentEntry geändert hat.
navigate: Wird ausgelöst, wenn jede 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

Specification
HTML # navigation-interface

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden