NavigationActivation
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 NavigationActivation
interface of the Navigation API represents a recent cross-document navigation. It contains the navigation type and outgoing and inbound document history entries.
This object is accessed via the PageSwapEvent.activation
and Navigation.activation
properties. Note that, in each case, the NavigationActivation
represents a different navigation:
Navigation.activation
represents information about the navigation to the current page.PageSwapEvent.activation
represents information about the navigation to the next page.
Instance properties
entry
Read only Experimental-
Contains a
NavigationHistoryEntry
object representing the history entry for the inbound ("to") document in the navigation. This is equivalent to theNavigation.currentEntry
property at the moment the inbound document was activated. from
Read only Experimental-
Contains a
NavigationHistoryEntry
object representing the history entry for the outgoing ("from") document in the navigation. -
Contains a string indicating the type of navigation.
Examples
window.addEventListener("pagereveal", async (e) => {
// If the "from" history entry does not exist, return
if (!navigation.activation.from) return;
// Only run this if an active view transition exists
if (e.viewTransition) {
const fromUrl = new URL(navigation.activation.from.url);
const currentUrl = new URL(navigation.activation.entry.url);
// Went from profile page to homepage
// ~> Set VT names on the relevant list item
if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
const profile = extractProfileNameFromUrl(fromUrl);
// Set view-transition-name values on the elements to animate
document.querySelector(`#${profile} span`).style.viewTransitionName =
"name";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"avatar";
// Remove names after snapshots have been taken
// so that we're ready for the next navigation
await e.viewTransition.ready;
document.querySelector(`#${profile} span`).style.viewTransitionName =
"none";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"none";
}
// Went to profile page
// ~> Set VT names on the main title and image
if (isProfilePage(currentUrl)) {
// Set view-transition-name values on the elements to animate
document.querySelector(`#detail main h1`).style.viewTransitionName =
"name";
document.querySelector(`#detail main img`).style.viewTransitionName =
"avatar";
// Remove names after snapshots have been taken
// so that we're ready for the next navigation
await e.viewTransition.ready;
document.querySelector(`#detail main h1`).style.viewTransitionName =
"none";
document.querySelector(`#detail main img`).style.viewTransitionName =
"none";
}
}
});
Note: See List of Chrome DevRel team members for the live demo this code is taken from.
Specifications
Specification |
---|
HTML Standard # navigationactivation |
Browser compatibility
BCD tables only load in the browser