NavigateEvent

Konstruktor

NavigateEvent()

Erstellt eine neue Instanz eines 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 DOM-Grenzen überschreitende Navigation nicht abfangen).

destination Schreibgeschützt

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

downloadRequest Schreibgeschützt

Gibt den Dateinamen der angeforderten Datei für den Download 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 repräsentiert, oder null andernfalls.

hashChange Schreibgeschützt

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

hasUAVisualTransition Schreibgeschützt

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

info Schreibgeschützt

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

navigationType Schreibgeschützt

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 storniert wird (z. B. durch das Drücken der "Stop"-Schaltfläche des Browsers oder durch den Start einer anderen Navigation, die dadurch die laufende Navigation storniert).

sourceElement Schreibgeschützt

Wenn die Navigation durch ein Element initiiert wurde (zum Beispiel durch Klicken auf einen Link), wird ein Element-Objekt zurückgegeben, das das initiierende Element repräsentiert.

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"-Schaltflächen des Browsers), andernfalls false.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

intercept()

Fängt diese Navigation ab und verwandelt sie in eine Navigation innerhalb des Dokuments zur destination URL. Es kann Handler-Funktionen akzeptieren, die das gewünschte Navigationsverhalten definieren, sowie focusReset- und scroll-Optionen, um das standardmäßige Fokussierungs- und Scroll-Verhalten des Browsers nach Wunsch zu aktivieren oder zu deaktivieren.

scroll()

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

Beispiele

Bearbeiten einer Navigation mit 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);
      },
    });
  }
});

Scrollen mit scroll() bearbeiten

In diesem Beispiel der Abfangung einer Navigation beginnt die handler()-Funktion mit dem Abrufen und Rendern von einigen Artikelinhalten, rendern danach jedoch einige sekundäre Inhalte. Es ist sinnvoll, die Seite so schnell wie möglich zum Hauptartikelinhalt zu scrollen, 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 Routenführung: die Navigation API
• Navigation API Erklärer
• Navigation API Live-Demo (Demo-Quelltext anzeigen)