DasNavigateEvent Interface derNavigation API ist das Ereignisobjekt für dasnavigate Ereignis, das ausgelöst wird, wennjede Art von Navigation initiiert wird (dies schließt die Verwendung vonHistory API Funktionen wieHistory.go() ein).NavigateEvent bietet Zugriff auf Informationen über diese Navigation und ermöglicht es Entwicklern, den Navigationsvorgang abzufangen und zu steuern.

Konstruktor

NavigateEvent()

Erstellt eine neue Instanz desNavigateEvent Objekts.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil,Event.

canInterceptSchreibgeschützt

Gibttrue zurück, wenn die Navigation abgefangen werden kann, oderfalse sonst (z. B. kann eine Navigation über verschiedene Herkunftsgebiete nicht abgefangen werden).

destinationSchreibgeschützt

Gibt einNavigationDestination Objekt zurück, das das Ziel der Navigation repräsentiert.

downloadRequestSchreibgeschützt

Gibt den Dateinamen der angeforderten Datei für den Download zurück, im Falle einer Download-Navigation (z. B. ein<a> oder<area> Element mit einemdownload Attribut), odernull sonst.

formDataSchreibgeschützt

Gibt dasFormData Objekt zurück, das die übermittelten Daten im Falle einerPOST-Formularübertragung repräsentiert, odernull sonst.

hashChangeSchreibgeschützt

Gibttrue zurück, wenn es sich um eine Fragmentnavigation handelt (d.h. zu einem Fragmentbezeichner im selben Dokument), oderfalse sonst.

hasUAVisualTransitionSchreibgeschützt

Gibttrue zurück, wenn der Benutzeragent eine visuelle Übergangsnavigation durchgeführt hat, bevor dieses Ereignis ausgelöst wurde, oderfalse sonst.

infoSchreibgeschützt

Gibt dieinfo-Datendaten zurück, die durch den initiierenden Navigationsvorgang übermittelt wurden (z. B.Navigation.back() oderNavigation.navigate()), oderundefined, wenn keineinfo-Daten übermittelt wurden.

navigationTypeSchreibgeschützt

Gibt den Typ der Navigation zurück —push,reload,replace odertraverse.

signalSchreibgeschützt

Gibt einAbortSignal zurück, das abgebrochen wird, wenn die Navigation abgebrochen wird (z. B. durch Drücken der "Stop"-Taste des Browsers oder durch Beginn einer neuen Navigation, die die laufende Navigation abbricht).

sourceElementSchreibgeschützt

Wenn die Navigation durch ein Element initiiert wurde (zum Beispiel durch Klicken auf einen Link), wird einElement Objekt zurückgegeben, das das auslösende Element darstellt.

userInitiatedSchreibgeschützt

Gibttrue zurück, wenn die Navigation vom Benutzer initiiert wurde (z. B. durch Klicken auf einen Link, Absenden eines Formulars oder Drücken der "Zurück"/"Vorwärts"-Tasten des Browsers), oderfalse sonst.

Instanz-Methoden

Erbt Methoden von seinem Elternteil,Event.

intercept()

Fängt diese Navigation ab, indem sie in eine gleiche Dokumentnavigation zurdestination URL umgewandelt wird. Es können Handler-Funktionen übergeben werden, die definieren, wie das Navigationsverhalten aussehen soll, sowiefocusReset undscroll Optionen, um das Standardfokus- und -scrollverhalten des Browsers nach Belieben ein- oder auszuschalten.

scroll()

Kann aufgerufen werden, um das browsergesteuerte Scrollverhalten zu manuell auszulösen, das als Reaktion auf die Navigation auftritt, wenn Sie möchten, dass es passiert, bevor der Navigationsvorgang abgeschlossen ist.

Beispiele

Handhabung einer Navigation mitintercept()

navigation.addEventListener("navigate", (event) => {  // Exit early if this navigation shouldn't be intercepted,  // e.g. if the navigation is cross-origin, or a download request  if (shouldNotIntercept(event)) return;  const url = new URL(event.destination.url);  if (url.pathname.startsWith("/articles/")) {    event.intercept({      async handler() {        // The URL has already changed, so show a placeholder while        // fetching the new content, such as a spinner or loading page        renderArticlePagePlaceholder();        // Fetch the new content and display when ready        const articleContent = await getArticleContent(url.pathname);        renderArticlePage(articleContent);      },    });  }});

Handhabung des Scrollens mitscroll()

In diesem Beispiel der Abfangung einer Navigation beginnt diehandler() Funktion damit, einige Artikelinhalte abzurufen und darzustellen, lädt aber danach noch sekundäre Inhalte nach. Es ist sinnvoll, die Seite zum Hauptartikelinhalt zu scrollen, sobald dieser verfügbar ist, sodass der Benutzer damit interagieren kann, anstatt zu warten, bis auch die sekundären Inhalte dargestellt sind. Um dies zu erreichen, haben wir einenscroll() Aufruf zwischen den beiden eingefügt.

navigation.addEventListener("navigate", (event) => {  if (shouldNotIntercept(event)) return;  const url = new URL(event.destination.url);  if (url.pathname.startsWith("/articles/")) {    event.intercept({      async handler() {        const articleContent = await getArticleContent(url.pathname);        renderArticlePage(articleContent);        event.scroll();        const secondaryContent = await getSecondaryContent(url.pathname);        addSecondaryContent(secondaryContent);      },    });  }});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Moderne clientseitige Navigation: die Navigation API
• Navigation API Erklärung
• Navigation API Live-Demo (Demo-Quellcode anzeigen)