NavigationDestination
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The NavigationDestination
interface of the Navigation API represents the destination being navigated to in the current navigation.
It is accessed via the NavigateEvent.destination
property.
Instance properties
id
Read only Experimental-
Returns the
id
value of the destinationNavigationHistoryEntry
if theNavigateEvent.navigationType
istraverse
, ornull
otherwise. index
Read only Experimental-
Returns the
index
value of the destinationNavigationHistoryEntry
if theNavigateEvent.navigationType
istraverse
, or-1
otherwise. key
Read only Experimental-
Returns the
key
value of the destinationNavigationHistoryEntry
if theNavigateEvent.navigationType
istraverse
, ornull
otherwise. sameDocument
Read only Experimental-
Returns
true
if the navigation is to the samedocument
as the currentDocument
value, orfalse
otherwise. url
Read only Experimental-
Returns the URL being navigated to.
Instance methods
getState()
Experimental-
Returns a clone of the available state associated with the destination
NavigationHistoryEntry
, or navigation operation (e.g.navigate()
) as appropriate.
Examples
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);
},
});
}
});
Specifications
Specification |
---|
Unknown specification # navigationdestination |
Browser compatibility
BCD tables only load in the browser