Navigation: `navigate`-Event

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 navigate-Event des Navigation-Interfaces wird ausgelöst, wenn jede Art von Navigation initiiert wird, und ermöglicht es Ihnen, diese bei Bedarf abzufangen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("navigate", (event) => { })

onnavigate = (event) => { }

Ereignistyp

Ein NavigateEvent, das von Event erbt.

Event NavigateEvent

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, hätten Sie, um etwas Ähnliches zu tun, alle Klick-Events auf Links abhören müssen, event.preventDefault() ausführen, den entsprechenden History.pushState()-Aufruf durchführen und dann die Seitenansicht basierend auf der neuen URL einrichten müssen. Und das hätte nicht alle Navigationen behandelt — nur vom Benutzer initiierte Link-Klicks.

Umgang mit Scrollen mittels scroll()

In diesem Beispiel zum Abfangen einer Navigation beginnt die Funktion handler() damit, einige Artikelinhalte abzurufen und darzustellen, und danach einige sekundäre Inhalte. Es ist sinnvoll, die Seite zu den Hauptartikelinhalten zu scrollen, sobald diese verfügbar sind, damit der Benutzer mit ihnen 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.

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
# event-navigate

Browser-Kompatibilität

Siehe auch