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-Ereignis der Navigation-Schnittstelle wird ausgelöst, wenn jede Art von Navigation initiiert wird, sodass Sie bei Bedarf eingreifen können.

Syntax

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

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

onnavigate = (event) => { }

Ereignistyp

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, musste man, um etwas Ähnliches zu tun, alle Klick-Ereignisse auf Links überwachen, event.preventDefault() ausführen, den entsprechenden History.pushState()-Aufruf durchführen und dann die Seitenanzeige basierend auf der neuen URL einrichten. Und dies würde nicht alle Navigationsvorgänge behandeln – nur von Benutzern initiierte Link-Klicks.

Umgang mit Scrollen mittels scroll()

In diesem Beispiel der Abfangung einer Navigation beginnt die handler()-Funktion mit dem Abrufen und Rendern einiger Artikelinhalte, ruft dann aber anschließend einige sekundäre Inhalte ab und rendert diese. Es ist sinnvoll, die Seite zum 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 einen scroll()-Aufruf zwischen den beiden 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
# event-navigate

Browser-Kompatibilität

Siehe auch