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 vor der Verwendung auf produktiven Webseiten.

Die NavigateEvent-Schnittstelle der Navigation API ist das Ereignisobjekt für das navigate-Ereignis, das ausgelöst wird, wenn irgendeine Art von Navigation initiiert wird (dazu gehört die Verwendung 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 kontrollieren.

Event NavigateEvent

Konstruktor

Erstellt eine neue Instanz des NavigateEvent-Objekts.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

canIntercept Schreibgeschützt

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

destination Schreibgeschützt

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

downloadRequest Schreibgeschützt

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

formData Schreibgeschützt

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

hashChange Schreibgeschützt

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

hasUAVisualTransition Schreibgeschützt

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

info Schreibgeschützt

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

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

signal Schreibgeschützt

Gibt ein AbortSignal zurück, das abgebrochen wird, wenn die Navigation abgebrochen wird (z.B. durch das Drücken der "Stop"-Taste des Browsers oder das Starten einer anderen Navigation, was die laufende Navigation abbricht).

sourceElement Schreibgeschützt

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

userInitiated Schreibgeschützt

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

Instanzmethoden

Erbt Methoden von seinem Elternteil, Event.

intercept()

Fängt diese Navigation ab und verwandelt sie in eine gleiche Dokument-Navigation zur destination-URL. Es kann eine Handler-Funktion 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 Reaktion auf die Navigation auftritt, wenn Sie möchten, dass es vor dem Abschluss der Navigation erfolgt.

Beispiele

Eine Navigation mit intercept() behandeln

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 Navigation API verfügbar war, hätten Sie etwas Ähnliches erreichen müssen, indem Sie auf alle Klick-Ereignisse auf Links hören, e.preventDefault() ausführen, den entsprechenden History.pushState()-Aufruf durchführen und dann die Seitenansicht basierend auf der neuen URL einrichten. Und das würde nicht alle Navigationen handhaben – nur linkinitiierte Klicks des Nutzers.

Scrollen mit scroll() behandeln

In diesem Beispiel des Abfangens einer Navigation beginnt die handler()-Funktion damit, einige Artikelinhalte abzurufen und darzustellen, holt dann jedoch einige sekundäre Inhalte und stellt diese danach dar. Es macht Sinn, die Seite auf den Hauptartikelinhalt zu scrollen, sobald dieser verfügbar ist, damit der Nutzer mit ihm interagieren kann, anstatt zu warten, bis auch der sekundäre Inhalt gerendert ist. Um dies zu erreichen, haben wir zwischen den beiden einen scroll()-Aufruf 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
# the-navigateevent-interface

Browser-Kompatibilität

Siehe auch