NavigateEvent()

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

The NavigateEvent() constructor creates a new NavigateEvent object instance.

Syntax

new NavigateEvent(type, init)

Parameters

type

A string representing the type of event. In the case of NavigateEvent this is always navigate.

init

An object containing the following properties:

canIntercept Optional

A boolean defining whether the navigation can be intercepted or not (e.g. you can't intercept a cross-origin navigation). Defaults to false.

destination

A NavigationDestination object representing the location being navigated to.

downloadRequest Optional

The filename of the file requested for download, in the case of a download navigation (e.g. an <a> or <area> element with a download attribute). Defaults to null.

formData Optional

The FormData object representing the submitted data in the case of a POST form submission. Defaults to null.

hashChange Optional

A boolean defining if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document). Defaults to false.

info Optional

The info data value passed by the initiating navigation operation (e.g. Navigation.back(), or Navigation.navigate()).

The type of the navigation. Possible values — push, reload, replace, and traverse. Defaults to push.

signal

An AbortSignal, which will become aborted if the navigation is cancelled (e.g. by the user pressing the browser's "Stop" button, or another navigation starting and thus cancelling the ongoing one).

userInitiated Optional

A boolean defining whether the navigation was initiated by the user (e.g. by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons). Defaults to false.

Examples

A developer would not use this constructor manually. A new NavigateEvent object is constructed when a handler is invoked as a result of the navigate event firing.

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-navigateevent

Browser compatibility

BCD tables only load in the browser

See also