NavigationDestination
Baseline
2026
Newly available
Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das NavigationDestination Interface der Navigation API repräsentiert das Ziel, zu dem im aktuellen Navigationsvorgang navigiert wird.
Es wird über die NavigateEvent.destination Eigenschaft aufgerufen.
Instanz-Eigenschaften
idSchreibgeschützt-
Gibt den
id-Wert des Ziel-NavigationHistoryEntryzurück, wenn derNavigateEvent.navigationTypetraverseist, oder einen leeren String andernfalls. indexSchreibgeschützt-
Gibt den
index-Wert des Ziel-NavigationHistoryEntryzurück, wenn derNavigateEvent.navigationTypetraverseist, oder-1andernfalls. keySchreibgeschützt-
Gibt den
key-Wert des Ziel-NavigationHistoryEntryzurück, wenn derNavigateEvent.navigationTypetraverseist, oder einen leeren String andernfalls. sameDocumentSchreibgeschützt-
Gibt
truezurück, wenn die Navigation zum gleichendocumentwie der aktuelleDocument-Wert erfolgt, oderfalseandernfalls. urlSchreibgeschützt-
Gibt die URL zurück, zu der navigiert wird.
Instanz-Methoden
getState()-
Gibt eine Kopie des verfügbaren Zustands zurück, der mit dem Ziel-
NavigationHistoryEntryoder der Navigationsoperation (z.B.navigate()) verknüpft ist, je nachdem, was zutreffend ist.
Beispiele
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 |