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 vor der Verwendung auf produktiven Webseiten.

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

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

Instanz-Eigenschaften

id Schreibgeschützt

Gibt den id-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder einen leeren String anderweitig.

index Schreibgeschützt

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

key Schreibgeschützt

Gibt den key-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder einen leeren String anderweitig.

sameDocument Schreibgeschützt

Gibt true zurück, wenn die Navigation zum gleichen Document wie das aktuelle Document erfolgt, oder false anderweitig.

url Schreibgeschützt

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

Instanz-Methoden

getState()

Gibt eine Kopie des verfügbaren Zustands zurück, der dem Ziel-NavigationHistoryEntry zugeordnet ist, oder, soweit angemessen, der Navigationsoperation (z.B. navigate()).

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
# the-navigationdestination-interface

Browser-Kompatibilität

Siehe auch