Window: pageswap-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das pageswap-Ereignis wird bei der Navigation zwischen Dokumenten ausgelöst, wenn das vorherige Dokument gerade entladen werden soll.
Dies ist bei dokumentübergreifenden (MPA-) View Transitions nützlich, um eine aktive Transition auf der Seite zu beeinflussen, die bei einer Navigation verlassen wird. Sie können beispielsweise die Transition überspringen oder die Animation beim Verlassen der Seite mit JavaScript anpassen.
Das Ereignis bietet außerdem Zugriff auf den Navigationstyp sowie auf die Verlaufseinträge des aktuellen Dokuments und des Zieldokuments.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("pageswap", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:
onpageswap = (event) => { }
Ereignistyp
Ein PageSwapEvent. Erbt von Event.
Beispiele
window.addEventListener("pageswap", async (e) => {
// Only run this if an active view transition exists
if (e.viewTransition) {
const currentUrl = e.activation.from?.url
? new URL(e.activation.from.url)
: null;
const targetUrl = new URL(e.activation.entry.url);
// Going from profile page to homepage
// ~> The big img and title are the ones!
if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
// 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 view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#detail main h1`).style.viewTransitionName =
"none";
document.querySelector(`#detail main img`).style.viewTransitionName =
"none";
}
// Going to profile page
// ~> The clicked items are the ones!
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// 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 view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#${profile} span`).style.viewTransitionName =
"none";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"none";
}
}
});
Hinweis: Eine Live-Demo, aus der dieser Code stammt, finden Sie unter Liste der Mitglieder des Chrome-DevRel-Teams.
Spezifikationen
| Spezifikation |
|---|
| HTML # event-pageswap |