Navigation

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das Navigation Interface der Navigation API ermöglicht die Kontrolle über alle Navigationsaktionen für das aktuelle window an einem zentralen Ort, einschließlich der programmatischen Initiierung von Navigationsvorgängen, der Untersuchung von Navigationseinträgen in der Historie und der Verwaltung von Navigationsvorgängen, während diese geschehen.

Es wird über die Window.navigation Eigenschaft zugegriffen.

Die Navigation API gibt nur Verlaufsdatensätze preis, die im aktuellen Browsing-Kontext erstellt wurden und den gleichen Ursprung wie die aktuelle Seite haben (z.B. keine Navigationsvorgänge innerhalb eingebetteter <iframe>s oder Cross-Origin-Navigationsvorgänge), und bietet somit eine genaue Liste aller vorherigen Verlaufsdatensätze nur für Ihre App. Dies macht das Durchqueren der Historie weitaus weniger anfällig als mit der älteren History API.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, EventTarget.

activation Schreibgeschützt Experimentell: Gibt ein NavigationActivation Objekt zurück, das Informationen über die kürzlichste bereichsübergreifende Navigation enthält, die dieses Dokument „aktiviert“ hat.
canGoBack Schreibgeschützt Experimentell: Gibt true zurück, wenn es möglich ist, in der Navigation-Historie rückwärts zu navigieren (d.h. der currentEntry ist nicht der erste in der Liste der Historien-Einträge), und false, wenn nicht.
canGoForward Schreibgeschützt Experimentell: Gibt true zurück, wenn es möglich ist, in der Navigation-Historie vorwärts zu navigieren (d.h. der currentEntry ist nicht der letzte in der Liste der Historien-Einträge), und false, wenn nicht.
currentEntry Schreibgeschützt Experimentell: Gibt ein NavigationHistoryEntry Objekt zurück, das den Ort darstellt, zu dem der Nutzer derzeit navigiert ist.
transition Schreibgeschützt Experimentell: Gibt ein NavigationTransition Objekt zurück, das den Status einer laufenden Navigation darstellt, der verwendet werden kann, um sie zu verfolgen. Gibt null zurück, wenn derzeit keine Navigation im Gange ist.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, EventTarget.

back() Experimentell: Navigiert um einen Eintrag rückwärts in der Navigation-Historie.
entries() Experimentell: Gibt ein Array von NavigationHistoryEntry Objekten zurück, die alle vorhandenen Historien-Einträge darstellen.
forward() Experimentell: Navigiert um einen Eintrag vorwärts in der Navigation-Historie.
navigate() Experimentell: Navigiert zu einer bestimmten URL und aktualisiert dabei eventuell bereitgestellte Zustände in der Liste der Historien-Einträge.
reload() Experimentell: Lädt die aktuelle URL neu und aktualisiert dabei eventuell bereitgestellte Zustände in der Liste der Historien-Einträge.
traverseTo() Experimentell: Navigiert zu einem bestimmten NavigationHistoryEntry, identifiziert durch key.
updateCurrentEntry() Experimentell: Aktualisiert den Zustand des currentEntry; verwendet in Fällen, in denen die Zustandsänderung unabhängig von einer Navigation oder einem Neuladen erfolgen wird.

Ereignisse

Erbt Ereignisse von seinem Elternteil, EventTarget.

currententrychange Experimentell: Wird ausgelöst, wenn sich der Navigation.currentEntry geändert hat.
navigate Experimentell: Wird ausgelöst, wenn jede Art von Navigation initiiert wird und ermöglicht es Ihnen, erforderliche Maßnahmen zu ergreifen.
navigateerror Experimentell: Wird ausgelöst, wenn eine Navigation fehlschlägt.
navigatesuccess Experimentell: Wird ausgelöst, wenn eine erfolgreiche Navigation beendet ist.

Beispiele

Vorwärts und rückwärts in der Historie bewegen

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 Historien-Eintrag 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 Neuladen ist:

navigation.updateCurrentEntry({ state: newState });

Spezifikationen

Specification
HTML # navigation-interface