web api interface
NavigationDestination
The NavigationDestination interface of the Navigation API represents the destination being navigated to in the current navigation.
It is accessed via the destination property.
Instance properties
idRead only- : Returns the
idvalue of the destinationNavigationHistoryEntryif thenavigationTypeistraverse, or an empty string otherwise.
- : Returns the
indexRead only- : Returns the
indexvalue of the destinationNavigationHistoryEntryif thenavigationTypeistraverse, or-1otherwise.
- : Returns the
keyRead only- : Returns the
keyvalue of the destinationNavigationHistoryEntryif thenavigationTypeistraverse, or an empty string otherwise.
- : Returns the
sameDocumentRead only- : Returns
trueif the navigation is to the samedocumentas the currentDocumentvalue, orfalseotherwise.
- : Returns
urlRead only- : Returns the URL being navigated to.
Instance methods
getState()- : Returns a clone of the available state associated with the destination
NavigationHistoryEntry, or navigation operation (e.g.,navigate()) as appropriate.
- : Returns a clone of the available state associated with the destination
Examples
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);
},
});
}
});
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.