NavigateEvent

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 NavigateEvent-Interface der Navigations-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 Zugriff auf Informationen über diese Navigation und ermöglicht es Entwicklern, die Navigation abzufangen und zu steuern.

Event NavigateEvent

Konstruktor

Erstellt eine neue NavigateEvent-Objektinstanz.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

canIntercept Nur lesbar

Gibt true zurück, wenn die Navigation abgefangen werden kann, oder false andernfalls (z.B. Sie können keine Cross-Origin-Navigation abfangen).

destination Nur lesbar

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

downloadRequest Nur lesbar

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

formData Nur lesbar

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

hashChange Nur lesbar

Gibt true zurück, wenn es sich bei der Navigation um eine Fragmentnavigation handelt (d.h. zu einem Fragment-Identifikator im selben Dokument), oder false andernfalls.

info Nur lesbar

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

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

signal Nur lesbar

Gibt ein AbortSignal zurück, das abgebrochen wird, wenn die Navigation abgebrochen wird (z.B. durch das Drücken des "Stop"-Schalters im Browser oder eine andere Navigation, die die laufende abbricht).

userInitiated Nur lesbar

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"-Schaltflächen im Browser) oder false andernfalls.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

intercept()

Fängt diese Navigation ab und verwandelt sie in eine gleichseitige Dokumentnavigation zur URL des destination. Es kann eine Handlerfunktion akzeptieren, die definiert, wie das Navigationsverhalten sein soll, sowie focusReset und scroll-Optionen, um das Verhalten nach Bedarf zu steuern.

scroll()

Kann aufgerufen werden, um das browsergesteuerte Scrollverhalten manuell auszulösen, das als Antwort auf die Navigation auftritt, wenn es geschehen soll, bevor die Navigation Verarbeitung abschließt.

Beispiele

Handhabung einer Navigation mit intercept()

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

Hinweis: Bevor die Navigations-API verfügbar war, musste man, um etwas Ähnliches zu tun, alle Klick-Ereignisse auf Links abhören, e.preventDefault() ausführen, den entsprechenden History.pushState()-Aufruf ausführen und dann die Seitenansicht basierend auf der neuen URL einrichten. Und dies würde nicht alle Navigationen abdecken — nur benutzerinitiierte Linkklicks.

Handhabung von Scrolling mit scroll()

In diesem Beispiel des Abfangens einer Navigation beginnt die handler()-Funktion damit, einige Artikelinhalte abzurufen und darzustellen, holt dann anschließend einige sekundäre Inhalte und stellt sie dar. Es ist sinnvoll, die Seite zum Hauptartikelinhalt zu scrollen, sobald dieser verfügbar ist, damit der Benutzer mit ihm interagieren kann, anstatt zu warten, bis auch der sekundäre Inhalt dargestellt ist. Um dies zu erreichen, haben wir einen scroll()-Aufruf zwischen den beiden hinzugefügt.

js
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

Specification
HTML Standard
# the-navigateevent-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch