NavigateEvent.destination

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The destination read-only property of the NavigateEvent interface returns a NavigationDestination object representing the destination being navigated to.

Value

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;
  }

  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
Navigation API
# dom-navigateevent-destination

Browser compatibility

BCD tables only load in the browser

See also