NavigationDestination

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, bevor Sie diese produktiv verwenden.

Die NavigationDestination-Schnittstelle der Navigation API repräsentiert das Ziel, zu dem in der aktuellen Navigation navigiert wird.

Sie wird über die NavigateEvent.destination-Eigenschaft aufgerufen.

Instanz-Eigenschaften

id Nur lesbar

Gibt den id-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder sonst ein leerer String.

index Nur lesbar

Gibt den index-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder -1 sonst.

key Nur lesbar

Gibt den key-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder sonst ein leerer String.

sameDocument Nur lesbar

Gibt true zurück, wenn die Navigation zum selben document wie der aktuelle Document-Wert erfolgt, oder false sonst.

url Nur lesbar

Gibt die URL zurück, zu der navigiert wird.

Instanz-Methoden

getState()

Gibt einen Klon des verfügbaren Zustands zurück, der mit dem Ziel-NavigationHistoryEntry oder dem Navigationsvorgang (z.B. navigate()) verknüpft ist.

Beispiele

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;
  }

  // Returns a URL() object constructed from the
  // NavigationDestination.url value
  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);
      },
    });
  }
});

Spezifikationen

Specification
HTML Standard
# the-navigationdestination-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch