Window: pageswap-Ereignis
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Das pageswap
-Ereignis wird ausgelöst, wenn Sie zwischen Dokumenten navigieren und das vorherige Dokument entladen wird.
Dies ist nützlich im Fall von Cross-Dokument-(MPA)-View-Transitions, um eine aktive Transition von der ausgehenden Seite einer Navigation zu manipulieren. Zum Beispiel könnten Sie die Transition überspringen oder die ausgehende Übergangsanimation über JavaScript anpassen.
Es bietet auch Zugriff auf den Navigationstyp sowie auf die aktuellen und Ziel-Dokumentverlaufseinträge.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("pageswap", (event) => {});
onpageswap = (event) => {};
Ereignistyp
Ein PageSwapEvent
. Erbt von Event
.
Ereigniseigenschaften
PageSwapEvent.activation
Nur lesbar-
Gibt ein
NavigationActivation
-Objekt zurück, das den Navigationstyp und die aktuellen und Ziel-Dokumentverlaufseinträge für eine Navigation mit derselben Herkunft enthält. Wenn die Navigation eine Cross-Origin-URL irgendwo in der Weiterleitungskette hat, wirdnull
zurückgegeben. PageSwapEvent.viewTransition
Nur lesbar-
Gibt das
ViewTransition
-Objekt zurück, das die eingehende Cross-Dokument-View-Transition darstellt, falls eine aktiv ist, wenn das Ereignis ausgelöst wird. Ist dies nicht der Fall, wirdnull
zurückgegeben.
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: Sehen Sie sich die Liste der Chrome DevRel-Teammitglieder für die Live-Demonstration an, aus der dieser Code stammt.
Spezifikationen
Specification |
---|
HTML Standard # event-pageswap |
Browser-Kompatibilität
BCD tables only load in the browser