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.

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 Schreibgeschützt Experimentell

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

index Schreibgeschützt Experimentell

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

key Schreibgeschützt Experimentell

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

sameDocument Schreibgeschützt Experimentell

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

url Schreibgeschützt Experimentell

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

Instanz-Methoden

getState() Experimentell

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
NavigationDestination
Experimental
getState
Experimental
id
Experimental
index
Experimental
key
Experimental
sameDocument
Experimental
url
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch