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. Dazu gehört das programmatische Initiieren von Navigationen, das Überprüfen von Navigationseinträgen in der Historie sowie das Verwalten von Navigationen, während sie stattfinden.

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

Die Navigation API gibt nur Historieneinträge preis, die im aktuellen Browsing-Kontext erstellt wurden und denselben Ursprung wie die aktuelle Seite haben (z. B. nicht Navigationen innerhalb eingebetteter <iframe>s oder cross-origin Navigationen), was eine genaue Liste aller vorherigen Historieneinträge nur für Ihre App bereitstellt. Dies macht das Durchlaufen der Historie weitaus weniger fehleranfällig als mit der älteren History API.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, EventTarget.

activation Schreibgeschützt: Gibt ein NavigationActivation-Objekt zurück, das Informationen über die zuletzt durchgeführte cross-document Navigation enthält, die dieses Dokument "aktiviert" hat.
canGoBack Schreibgeschützt: Gibt true zurück, wenn es möglich ist, in der Navigationshistorie zurückzugehen (d.h. der currentEntry ist nicht der erste in der Historieneintrag-Liste), und false, wenn dies nicht möglich ist.
canGoForward Schreibgeschützt: Gibt true zurück, wenn es möglich ist, in der Navigationshistorie vorwärts zu gehen (d.h. der currentEntry ist nicht der letzte in der Historieneintrag-Liste), und false, wenn dies nicht möglich ist.
currentEntry Schreibgeschützt: Gibt ein NavigationHistoryEntry-Objekt zurück, das den Ort repräsentiert, zu dem der Benutzer aktuell navigiert ist.
transition Schreibgeschützt: Gibt ein NavigationTransition-Objekt zurück, das den Status einer laufenden Navigation repräsentiert, welches genutzt werden kann, um diese zu verfolgen. Gibt null zurück, wenn derzeit keine Navigation im Gange ist.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, EventTarget.

back(): Navigiert um einen Eintrag in der Navigationshistorie zurück.
entries(): Gibt ein Array von NavigationHistoryEntry-Objekten zurück, die alle bestehenden Historieneinträge repräsentieren.
forward(): Navigiert um einen Eintrag in der Navigationshistorie vorwärts.
navigate(): Navigiert zu einer bestimmten URL und aktualisiert jeden bereitgestellten Status in der Historieneinträge-Liste.
reload(): Lädt die aktuelle URL neu und aktualisiert jeden bereitgestellten Status in der Historieneinträge-Liste.
traverseTo(): Navigiert zu einem bestimmten NavigationHistoryEntry, identifiziert durch key.
updateCurrentEntry(): Aktualisiert den Status von currentEntry; wird verwendet in Fällen, in denen die Statusänderung unabhängig von einer Navigation oder einem Neuladen sein wird.

Ereignisse

Erbt Ereignisse von seinem Elternteil, EventTarget.

currententrychange Experimentell: Tritt auf, wenn sich der Navigation.currentEntry geändert hat.
navigate Experimentell: Wird ausgelöst, wenn eine beliebige Art von Navigation initiiert wird, sodass Sie nach Bedarf eingreifen können.
navigateerror Experimentell: Tritt auf, wenn eine Navigation fehlschlägt.
navigatesuccess Experimentell: Tritt auf, wenn eine erfolgreiche Navigation abgeschlossen ist.

Beispiele

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

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

Durchsuchen eines bestimmten Historieneintrags

// 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 Aktualisieren des Status

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

Oder

navigation.reload({ state: newState });

Oder wenn der Status unabhängig von einer Navigation oder einem Neuladen 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