Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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.

Instanzeigenschaften

id Schreibgeschützt Experimentell

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

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 einen leeren String sonst.

sameDocument Schreibgeschützt Experimentell

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

url Schreibgeschützt Experimentell

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

Instanzmethoden

getState() Experimentell

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

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