NavigateEvent

Konstruktor

NavigateEvent()

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 sonst (z. B. kann eine Navigation über verschiedene Herkunftsgebiete nicht abgefangen werden).

destination Schreibgeschützt

Gibt ein NavigationDestination Objekt zurück, das das Ziel der Navigation repräsentiert.

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 sonst.

formData Schreibgeschützt

Gibt das FormData Objekt zurück, das die übermittelten Daten im Falle einer POST-Formularübertragung repräsentiert, oder null sonst.

hashChange Schreibgeschützt

Gibt true zurück, wenn es sich um eine Fragmentnavigation handelt (d.h. zu einem Fragmentbezeichner im selben Dokument), oder false sonst.

hasUAVisualTransition Schreibgeschützt

Gibt true zurück, wenn der Benutzeragent eine visuelle Übergangsnavigation durchgeführt hat, bevor dieses Ereignis ausgelöst wurde, oder false sonst.

info Schreibgeschützt

Gibt die info-Datendaten zurück, die durch den initiierenden Navigationsvorgang übermittelt wurden (z. B. Navigation.back() oder Navigation.navigate()), oder undefined, wenn keine info-Daten übermittelt 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 abgebrochen wird (z. B. durch Drücken der "Stop"-Taste des Browsers oder durch Beginn einer neuen Navigation, die die laufende Navigation abbricht).

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 auslösende Element darstellt.

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 sonst.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

intercept()

Fängt diese Navigation ab, indem sie in eine gleiche Dokumentnavigation zur destination URL umgewandelt wird. Es können Handler-Funktionen übergeben werden, die definieren, wie das Navigationsverhalten aussehen soll, sowie focusReset und scroll Optionen, um das Standardfokus- und -scrollverhalten des Browsers nach Belieben ein- oder auszuschalten.

scroll()

Kann aufgerufen werden, um das browsergesteuerte Scrollverhalten zu manuell auszulösen, das als Reaktion auf die Navigation auftritt, wenn Sie möchten, dass es passiert, bevor der Navigationsvorgang abgeschlossen ist.

Beispiele

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

Handhabung des Scrollens mit scroll()

In diesem Beispiel der Abfangung einer Navigation beginnt die handler() Funktion damit, einige Artikelinhalte abzurufen und darzustellen, lädt aber danach noch sekundäre Inhalte nach. Es ist sinnvoll, die Seite zum Hauptartikelinhalt zu scrollen, sobald dieser verfügbar ist, sodass der Benutzer damit interagieren kann, anstatt zu warten, bis auch die sekundären Inhalte dargestellt sind. Um dies zu erreichen, haben wir einen scroll() Aufruf zwischen den beiden eingefügt.

navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(event)) 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 Navigation: die Navigation API
• Navigation API Erklärung
• Navigation API Live-Demo (Demo-Quellcode anzeigen)