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.

Das NavigateEvent-Interface der Navigation API ist das Event-Objekt für das navigate-Ereignis, welches ausgelöst wird, wenn jede Art von Navigation gestartet 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, den Ablauf der Navigation abzufangen und zu steuern.

Event NavigateEvent

Konstruktor

Erstellt eine neue NavigateEvent-Objektinstanz.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

canIntercept Schreibgeschützt

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

destination Schreibgeschützt

Gibt ein NavigationDestination-Objekt zurück, das das Ziel darstellt, zu dem navigiert wird.

downloadRequest Schreibgeschützt

Gibt den Dateinamen der Datei zurück, die zum Herunterladen angefordert wurde, 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 um eine Fragment-Navigation handelt (d.h. zu einem Fragment-Identifikator 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 die initiierende Navigationsoperation ü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., wenn der Benutzer die "Stop"-Taste des Browsers drückt oder eine andere Navigation startet und somit die laufende abbricht).

userInitiated Schreibgeschützt

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 des Browsers), oder false andernfalls.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

intercept()

Fängt diese Navigation ab und wandelt sie in eine indokumentariologische Navigation zur destination-URL um. Es kann eine Handler-Funktion akzeptieren, die definiert, wie das Navigationsverhalten aussehen soll, plus focusReset- und scroll-Optionen, um das Verhalten nach Wunsch zu steuern.

scroll()

Kann aufgerufen werden, um das browsergesteuerte Scroll-Verhalten, das als Reaktion auf die Navigation auftritt, manuell auszulösen, wenn Sie möchten, dass es vor Abschluss der Navigationsverarbeitung geschieht.

Beispiele

Umgang mit einer Navigation mittels 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 Navigation API verfügbar war, mussten Sie, um etwas Ähnliches zu tun, alle Klickereignisse auf Links überwachen, 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 Navigationsarten abdecken — nur benutzerinitiierte Linkklicks.

Umgang mit Scrollen mittels scroll()

In diesem Beispiel einer abgefangenen Navigation beginnt die handler()-Funktion mit dem Abrufen und Rendern einiger Artikelinhalte, um anschließend einige sekundäre Inhalte abzurufen und zu rendern. Es ist sinnvoll, die Seite auf den Hauptartikelinhalt zu scrollen, sobald dieser verfügbar ist, damit der Benutzer damit interagieren kann, anstatt zu warten, bis auch die sekundären Inhalte gerendert sind. 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