This feature is not Baseline because it does not work in some of the most widely-used browsers.
The navigationType read-only property of the
NavigateEvent interface returns the type of the navigation — push, reload, replace, or traverse.
An enumerated value representing the type of navigation.
The possible values are:
push: A new location is navigated to, causing a new entry to be pushed onto the history list.reload: The Navigation.currentEntry is reloaded.replace: The id.traverse: The browser navigates from one existing history entry to another existing history entry.Sometimes it's desirable to handle back/forward navigations specially, e.g., reusing cached views by transitioning them onto the screen. This can be done by branching as follows:
navigation.addEventListener("navigate", (event) => {
/ Some navigations, e.g. cross-origin navigations, we
/ cannot intercept. Let the browser handle those normally.
if (!event.canIntercept) {
return;
}
/ Don't intercept fragment navigations or downloads.
if (event.hashChange || event.downloadRequest !== null) {
return;
}
event.intercept({
async handler() {
if (myFramework.currentPage) {
await myFramework.currentPage.transitionOut();
}
let { key } = event.destination;
if (
event.navigationType === "traverse" &&
myFramework.previousPages.has(key)
) {
await myFramework.previousPages.get(key).transitionIn();
} else {
/ This will probably result in myFramework storing
/ the rendered page in myFramework.previousPages.
await myFramework.renderPage(event.destination);
}
},
});
});
| Specification |
|---|
| HTML # dom-navigateevent-navigationtype-dev |