Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
NavigationActivation
Baseline
2026
Neu verfügbar
Seit January 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Das NavigationActivation-Interface der Navigation API repräsentiert eine kürzlich erfolgte Dokument-übergreifende Navigation. Es enthält den Navigationstyp sowie ausgehende und eingehende Dokumenthistorieneinträge.
Auf dieses Objekt wird über die Eigenschaften PageSwapEvent.activation und Navigation.activation zugegriffen. Beachten Sie, dass das NavigationActivation in jedem Fall eine unterschiedliche Navigation darstellt:
Navigation.activationrepräsentiert Informationen über die Navigation zur aktuellen Seite.PageSwapEvent.activationrepräsentiert Informationen über die Navigation zur nächsten Seite.
Instanzeigenschaften
entrySchreibgeschützt-
Enthält ein
NavigationHistoryEntry-Objekt, das den Historieneintrag für das eingehende ("zu") Dokument in der Navigation repräsentiert. Dies entspricht derNavigation.currentEntry-Eigenschaft in dem Moment, in dem das eingehende Dokument aktiviert wurde. fromSchreibgeschützt-
Enthält ein
NavigationHistoryEntry-Objekt, das den Historieneintrag für das ausgehende ("von") Dokument in der Navigation repräsentiert. -
Enthält einen String, der den Typ der Navigation angibt.
Beispiele
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";
}
}
});
Hinweis: Sehen Sie sich Liste der Chrome DevRel-Teammitglieder für die Live-Demo an, aus der dieser Code stammt.
Spezifikationen
| Spezifikation |
|---|
| HTML # navigationactivation |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.