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, bevor Sie diese produktiv verwenden.

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 Einleitung von Navigationen, der Untersuchung von Navigationseinträgen in der Historie und der Verwaltung von Navigationen, während sie stattfinden.

Es wird über die Window.navigation-Eigenschaft aufgerufen.

Die Navigation API gibt nur Historieneinträge wieder, die im aktuellen Browsing-Kontext erstellt wurden und denselben Ursprung wie die aktuelle Seite haben (z. B. keine Navigationen innerhalb eingebetteter <iframe>s oder über Ursprünge hinweg), und bietet daher eine genaue Liste aller vorherigen Historieneinträge nur für Ihre App. Dies macht das Durchgehen der Historie zu einem viel weniger fragilen Unterfangen im Vergleich zur älteren History API.

EventTarget Navigation

Instanzeigenschaften

Erbt Eigenschaften von ihrem Elternteil, EventTarget.

activation Nur lesbar

Gibt ein NavigationActivation-Objekt zurück, das Informationen über die letzte cross-document Navigation enthält, die dieses Dokument "aktiviert" hat.

canGoBack Nur lesbar

Gibt true zurück, wenn es möglich ist, rückwärts in der Navigationhistorie zu navigieren (d. h. der currentEntry ist nicht der erste in der Liste der Historieneinträge), und false, wenn es nicht möglich ist.

canGoForward Nur lesbar

Gibt true zurück, wenn es möglich ist, vorwärts in der Navigationhistorie zu navigieren (d. h. der currentEntry ist nicht der letzte in der Liste der Historieneinträge), und false, wenn es nicht möglich ist.

currentEntry Nur lesbar

Gibt ein NavigationHistoryEntry-Objekt zurück, das den Ort repräsentiert, zu dem der Benutzer aktuell navigiert ist.

transition Nur lesbar

Gibt ein NavigationTransition-Objekt zurück, das den Status einer laufenden Navigation repräsentiert, die verfolgt werden kann. Gibt null zurück, wenn aktuell keine Navigation im Gange ist.

Instanzmethoden

Erbt Methoden von ihrem Elternteil, EventTarget.

back()

Navigiert um einen Eintrag rückwärts in der Navigationhistorie.

entries()

Gibt ein Array von NavigationHistoryEntry-Objekten zurück, die alle bestehenden Historieneinträge darstellen.

forward()

Navigiert um einen Eintrag vorwärts in der Navigationhistorie.

Navigiert zu einer spezifischen URL und aktualisiert dabei gegebenenfalls den Zustand in der Liste der Historieneinträge.

reload()

Lädt die aktuelle URL neu und aktualisiert dabei gegebenenfalls den Zustand in der Liste der Historieneinträge.

traverseTo()

Navigiert zu einem spezifischen NavigationHistoryEntry, das durch key identifiziert ist.

updateCurrentEntry()

Aktualisiert den Zustand des currentEntry; wird verwendet in Fällen, in denen die Zustandsänderung unabhängig von einer Navigation oder Neuladen ist.

Ereignisse

Erbt Ereignisse von ihrem Elternteil, EventTarget.

currententrychange

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

Wird ausgelöst, wenn irgendeine Art von Navigation eingeleitet wird, sodass Sie eingreifen können, falls erforderlich.

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

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

Beispiele

Im Verlauf vorwärts und rückwärts bewegen

js
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 spezifischen Eintrag im Verlauf navigieren

js
// 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;
js
navigation.navigate(url, { state: newState });

Oder

js
navigation.reload({ state: newState });

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

js
navigation.updateCurrentEntry({ state: newState });

Spezifikationen

Specification
HTML Standard
# navigation-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch