NavigateEvent

Die NavigateEvent-Schnittstelle der Navigation API ist das Ereignisobjekt für das navigate-Ereignis, das ausgelöst wird, wenn eine beliebige Art von Navigation initiiert wird (dies umfasst die Nutzung von History API-Funktionen wie History.go()). NavigateEvent bietet Zugang zu Informationen über diese Navigation und ermöglicht Entwicklern, die Navigation abzufangen und zu steuern.

Konstruktor

NavigateEvent() Experimentell

Erstellt eine neue NavigateEvent-Objektinstanz.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

canIntercept Schreibgeschützt Experimentell

Gibt true zurück, wenn die Navigation abgefangen werden kann, oder false andernfalls (z. B. kann eine Cross-Origin-Navigation nicht abgefangen werden).

destination Schreibgeschützt Experimentell

Gibt ein NavigationDestination-Objekt zurück, das das Ziel der Navigation darstellt.

downloadRequest Schreibgeschützt Experimentell

Gibt den Dateinamen der angeforderten Datei zum Herunterladen zurück, im Falle einer Download-Navigation (z. B. ein <a>- oder <area>-Element mit einem download-Attribut), oder null andernfalls.

formData Schreibgeschützt Experimentell

Gibt das FormData-Objekt zurück, das die übermittelten Daten im Falle einer POST-Formularübermittlung darstellt, oder null andernfalls.

hashChange Schreibgeschützt Experimentell

Gibt true zurück, wenn die Navigation eine Fragmentnavigation ist (d.h. zu einem Fragment-Identifier im selben Dokument), oder false andernfalls.

hasUAVisualTransition Schreibgeschützt Experimentell

Gibt true zurück, wenn der User Agent für diese Navigation eine visuelle Übergangsanimation durchgeführt hat, bevor dieses Ereignis ausgelöst wurde, oder false andernfalls.

info Schreibgeschützt Experimentell

Gibt den info-Datenwert zurück, der von der auslösenden Navigationsoperation übergeben wurde (z. B. Navigation.back() oder Navigation.navigate()), oder undefined, wenn keine info-Daten übergeben wurden.

navigationType Schreibgeschützt Experimentell

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

signal Schreibgeschützt Experimentell

Gibt ein AbortSignal zurück, das abgebrochen wird, wenn die Navigation abgebrochen wird (z. B. durch das Drücken der "Stopp"-Taste im Browser oder das Starten einer anderen Navigation, die die laufende somit abbricht).

sourceElement Schreibgeschützt Experimentell

Wenn die Navigation durch ein Element initiiert wurde (zum Beispiel durch Klicken auf einen Link), gibt ein Element-Objekt das auslösende Element zurück.

userInitiated Schreibgeschützt Experimentell

Gibt true 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 im Browser), oder false andernfalls.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

intercept() Experimentell

Fängt diese Navigation ab und konvertiert sie in eine gleiche Dokumentnavigation zur destination-URL. Es kann Handler-Funktionen annehmen, die das Navigationsverhalten definieren sollen, sowie focusReset- und scroll-Optionen, um das Standard-Fokus- und Scrollverhalten des Browsers nach Wunsch zu aktivieren oder zu deaktivieren.

scroll() Experimentell

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

Beispiele

Umgang mit einer Navigation unter Verwendung von intercept()

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

Umgang mit Scrolling unter Verwendung von scroll()

In diesem Beispiel des Abfangens einer Navigation beginnt die handler()-Funktion damit, einige Artikelinhalte abzurufen und anzuzeigen, holt und rendert jedoch danach einige sekundäre Inhalte. Es ergibt Sinn, die Seite zu den Hauptartikelinhalten zu scrollen, sobald diese verfügbar sind, damit der Benutzer damit interagieren kann, anstatt zu warten, bis auch die sekundären Inhalte gerendert sind. Um dies zu erreichen, haben wir einen scroll()-Aufruf zwischen den beiden hinzugefügt.

navigation.addEventListener("navigate", (event) => {
 if (shouldNotIntercept(navigateEvent)) 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ärer
• Navigation API Live-Demo (Demoquelle anzeigen)