NavigateEvent: canIntercept property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The canIntercept
read-only property of the
NavigateEvent
interface returns true
if the navigation can be intercepted and have its URL rewritten, or false
otherwise
There are several rules around when a navigation can be intercepted. For example:
- You can't intercept cross-origin navigations.
- You can intercept
http
orhttps
URLs if only thepath
,query
, andfragment
portions of the new URL differ from the current URL. - You can intercept
file
URLs if only thequery
andfragment
portions of the new URL differ. - For other URL types you can intercept the navigation if only the
fragment
portion differs.
See the spec for more explanation on when a Document can have its URL rewritten, including a table of examples.
Value
A boolean value—true
if the navigation can be intercepted, false
if not.
Examples
js
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({
handler() {
if (event.formData) {
processFormDataAndUpdateUI(event.formData, event.signal);
} else {
doSinglePageAppNav(event.destination, event.signal);
}
},
});
});
Specifications
Specification |
---|
Unknown specification # dom-navigateevent-canintercept |
Browser compatibility
BCD tables only load in the browser