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 Steuerung aller Navigationsaktionen für das aktuelle window an einem zentralen Ort. Dazu gehört das programmgesteuerte Einleiten von Navigationen, das Untersuchen von Navigationseinträgen in der Historie und das Verwalten von Navigationen, während sie stattfinden.

Es wird über die Eigenschaft Window.navigation aufgerufen.

Die Navigation API offenbart nur Einträge in der Historie, die im aktuellen Browsing-Kontext erstellt wurden und denselben Ursprung wie die aktuelle Seite haben (z.B. keine Navigationen innerhalb eingebetteter <iframe>s oder Cross-Origin-Navigationen), was eine genaue Liste aller vorherigen Historieeinträge ausschließlich für Ihre App bietet. Dies macht das Durchlaufen der Historie zu einer weitaus weniger fragilen Angelegenheit im Vergleich zur älteren History API.

EventTarget Navigation

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, in der Navigationshistorie rückwärts zu navigieren (d.h. der currentEntry ist nicht der erste Eintrag in der Historie-Liste), und false, wenn dies nicht der Fall ist.

canGoForward Schreibgeschützt

Gibt true zurück, wenn es möglich ist, in der Navigationshistorie vorwärts zu navigieren (d.h. der currentEntry ist nicht der letzte Eintrag in der Historie-Liste), und false, wenn dies nicht der Fall ist.

currentEntry Schreibgeschützt

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

transition Schreibgeschützt

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

Instanz-Methoden

Erbt Methoden von ihrem Elternteil, EventTarget.

back()

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

entries()

Gibt ein Array von NavigationHistoryEntry-Objekten zurück, die alle existierenden Historieeinträge repräsentieren.

forward()

Navigiert um einen Eintrag in der Navigationshistorie vorwärts.

Navigiert zu einer spezifischen URL, wobei der bereitgestellte Zustand in der Historie-Eintragsliste aktualisiert wird.

reload()

Lädt die aktuelle URL neu, wobei der bereitgestellte Zustand in der Historie-Eintragsliste aktualisiert wird.

traverseTo()

Navigiert zu einem spezifischen NavigationHistoryEntry, der durch key identifiziert wird.

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 seinem Elternteil, EventTarget.

currententrychange

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

Wird ausgelöst, wenn jede Art von Navigation initiiert wird, wodurch Sie bei Bedarf eingreifen können.

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

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

Beispiele

Vorwärts- und Rückwärtsnavigieren in der Historie

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");
  }
}

Durchlaufen zu einem spezifischen Historieeintrag

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 einem Neuladen ist:

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

Spezifikationen

Specification
HTML
# navigation-interface

Browser-Kompatibilität

Siehe auch