NavigationHistoryEntry

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.

These objects are commonly accessed via the Navigation.currentEntry property and Navigation.entries() method.

The Navigation API only exposes history entries created in the current browsing context that have the same origin as the current page (e.g. not navigations inside embedded <iframe>s, or cross-origin navigations), providing an accurate list of all previous history entries just for your app. This makes traversing the history a much less fragile proposition than with the older History API.

EventTarget NavigationHistoryEntry

Instance properties

Inherits properties from its parent, EventTarget.

id Read only Experimental

Returns the id of the history entry. This is a unique, UA-generated value that always represents a specific history entry, useful to correlate it with an external resource such as a storage cache.

index Read only Experimental

Returns the index of the history entry in the history entries list (that is, the list returned by Navigation.entries()), or -1 if the entry does not appear in the list.

key Read only Experimental

Returns the key of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself. It is used to navigate that particular slot via Navigation.traverseTo(). The key will be reused by other entries that replace the entry in the list (that is, if the NavigateEvent.navigationType is replace).

sameDocument Read only Experimental

Returns true if this history entry is for the same document as the current Document value, or false otherwise.

url Read only Experimental

Returns the absolute URL of this history entry. If the entry corresponds to a different document than the current one (like sameDocument property is false), and that document was fetched with a Referrer-Policy header set to no-referrer or origin, the property returns null.

Instance methods

Inherits methods from its parent, EventTarget.

getState() Experimental

Returns a clone of the available state associated with this history entry.

Events

dispose Experimental

Fires when the entry is no longer part of the history entry list.

Examples

js
function initHomeBtn() {
  // Get the key of the first loaded entry
  // so the user can always go back to this view.
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigate to a different view,
      // but the "home" button will always work.
    },
  });
});

Specifications

Specification
HTML
# the-navigationhistoryentry-interface

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
NavigationHistoryEntry
Experimental
dispose event
Experimental
getState
Experimental
id
Experimental
index
Experimental
key
Experimental
sameDocument
Experimental
url
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

See also