Limited availability
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.
new NavigateEvent(type, init)
type
A string representing the type of event.
init
An object that, in addition to the properties defined in Event(), has 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.
hasUAVisualTransition Optional
A boolean defining whether the user agent has performed a visual transition for this navigation before dispatching this event. Defaults to false.
info Optional
The info data value passed by the initiating navigation operation (e.g., Navigation.back(), or Navigation.navigate()).
navigationType Optional
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).
sourceElement Optional
An Element object representing the initiating element in cases where the navigation was initiated by an element, or null if the navigation was not initiated by an element. Defaults to null.
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.
A new NavigateEvent object.
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);
},
});
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4