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 Ereignisobjekt für das navigate-Ereignis, das ausgelöst wird, wenn jede Art von Navigation initiiert wird (einschließlich der Nutzung von Funktionen der History API wie History.go()). NavigateEvent bietet Zugriff auf Informationen über diese Navigation und erlaubt es Entwicklern, die Navigation abzufangen und die Handhabung der Navigation zu steuern.

Event NavigateEvent

Konstruktor

Erstellt eine neue Instanz des NavigateEvent-Objekts.

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 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 Datei zurück, die für den Download 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 Fragmentnavigation handelt (d.h. zu einem Fragment-Identifikator im selben Dokument) oder false andernfalls.

hasUAVisualTransition Schreibgeschützt

Gibt true zurück, wenn der User-Agent für diese Navigation vor dem Auslösen dieses Ereignisses eine visuelle Übergangsanimation durchgeführt hat, oder false andernfalls.

info Schreibgeschützt

Gibt den info-Datenwert zurück, der von der initiierenden 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. durch das Drücken der "Stop"-Taste des Browsers durch den Benutzer oder durch den Beginn einer weiteren Navigation, wodurch die laufende abgebrochen wird).

userInitiated Schreibgeschützt

Gibt true zurück, wenn die Navigation vom Benutzer initiiert wurde (z.B. durch Klicken auf einen Link, das Absenden eines Formulars oder das 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 gleichdokumentsbezogene Navigation zur destination-URL um. Sie kann eine Handler-Funktion akzeptieren, die das Verhalten der Navigation definiert, sowie focusReset- und scroll-Optionen, um das Verhalten nach Wunsch zu steuern.

scroll()

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

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 Navigation API verfügbar war, musste man, um etwas Ähnliches zu tun, auf alle Klickereignisse 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 dies würde nicht alle Navigationsarten abdecken — nur vom Benutzer initiierte Link-Klicks.

Handhabung von Scrolling mit scroll()

In diesem Beispiel zum Abfangen einer Navigation beginnt die handler()-Funktion damit, einige Artikelinhalte abzurufen und darzustellen, um dann nachfolgend einige sekundäre Inhalte zu laden und anzuzeigen. Es ist sinnvoll, die Seite so bald wie möglich zu dem Hauptartikelinhalt zu scrollen, damit der Benutzer damit 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 eingefü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