Signatur
get NavigationActivation.entry
Beschreibung
Die Eigenschaft entry eines NavigationActivation-Objekts enthält den Verlaufseintrag (NavigationHistoryEntry) des Dokuments, zu dem navigiert wird. Der Wert entspricht dem, was navigation.currentEntry in dem Moment ergab, als das neue Dokument aktiviert wurde. Über den Eintrag kommen Sie an url, key, id, index und den gespeicherten Zustand (getState()).
Ein NavigationActivation-Objekt bekommen Sie auf drei Wegen:
navigation.activation– beschreibt die letzte dokumentübergreifende Navigation, durch die die aktuelle Seite geladen wurde.PageRevealEvent.activationim Ereignispagereveal– wird ausgelöst, wenn das neue Dokument zum ersten Mal angezeigt wird.PageSwapEvent.activationim Ereignispageswap– wird ausgelöst, kurz bevor das alte Dokument entladen wird. Hier zeigtentryauf das Ziel der Navigation.
Am häufigsten wird entry zusammen mit from und navigationType verwendet, zum Beispiel um bei dokumentübergreifenden View Transitions je nach Quell- und Ziel-URL eine passende Animation auszuwählen oder um Analysedaten über Navigationswege zu sammeln.
Rückgabewert
Typ
NavigationHistoryEntry
Beschreibung
Der Verlaufseintrag des eingehenden Dokuments, zum Beispiel mit
url, key, index und getState().Beispiele
Ziel-URL der aktuellen Seitenaktivierung lesen
// Prüfen, ob die Navigation-API und activation verfügbar sind
if ('navigation' in window && navigation.activation) {
const { entry, from, navigationType } = navigation.activation;
console.log('Ziel:', new URL(entry.url).pathname);
console.log('Herkunft:', from ? new URL(from.url).pathname : '(keine gleiche Herkunft)');
console.log('Typ:', navigationType);
}Ziel: /produkte/42
Herkunft: /produkte
Typ: push
View Transition je nach Zielseite im pagereveal-Ereignis wählen
window.addEventListener('pagereveal', (event) => {
if (!event.viewTransition || !event.activation) return;
const to = new URL(event.activation.entry.url);
const from = event.activation.from ? new URL(event.activation.from.url) : null;
// Von der Liste in die Detailansicht: eigene Animation
if (from?.pathname === '/produkte' && to.pathname.startsWith('/produkte/')) {
event.viewTransition.types.add('liste-zu-detail');
} else if (event.activation.navigationType === 'traverse') {
event.viewTransition.types.add('zurueck');
}
});Im pageswap-Ereignis auf das Navigationsziel reagieren
window.addEventListener('pageswap', (event) => {
if (!event.viewTransition || !event.activation) return;
// entry ist hier der Eintrag der Seite, die gleich geladen wird
const zielPfad = new URL(event.activation.entry.url).pathname;
if (zielPfad.startsWith('/produkte/')) {
const id = zielPfad.split('/').pop();
const bild = document.querySelector(`#produkt-${id} img`);
if (bild) {
bild.style.viewTransitionName = 'produktbild';
// Nach dem Erfassen des Snapshots wieder zurücksetzen
event.viewTransition.finished.then(() => {
bild.style.viewTransitionName = '';
});
}
}
});// Wichtig · Fallstricke
- Browser-Kompatibilität:
NavigationActivationgehört zur Navigation-API und wird von Chromium-Browsern ab Version 123 unterstützt (pageswapab 124). Andere Engines unterstützen die Navigation-API erst in neueren Versionen oder noch gar nicht. Prüfen Sie die Verfügbarkeit daher immer mit einer Feature-Erkennung wie'navigation' in window && navigation.activation. navigation.activationkannnullsein, etwa in Frames, bei Seiten ohne dokumentübergreifende Navigation oder in nicht unterstützten Kontexten. Auchevent.activationinpageswapistnull, wenn das Ziel eine andere Herkunft (Origin) hat oder die Navigation über eine Weiterleitung zu einer fremden Herkunft lief.navigation.activation.entrywird bei Navigationen innerhalb desselben Dokuments (z. B.history.pushState()oder abgefangene Navigationen) nicht aktualisiert. Den jeweils aktuellen Eintrag liefertnavigation.currentEntry.- Bei
navigationType === 'reload'zeigenentryundfromauf denselben Eintrag. Die Eigenschaft ist schreibgeschützt; Zuweisungen werden stillschweigend ignoriert (im Strict Mode wird einTypeErrorausgelöst).