Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Window: pageswap-Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Daspageswap-Ereignis wird ausgelöst, wenn Sie zwischen Dokumenten navigieren, wenn das vorherige Dokument entladen werden soll.
Dies ist nützlich im Fall von Cross-Dokument (MPA)View-Übergängen, um einen aktiven Übergang von der ausgehenden Seite einer Navigation zu manipulieren. Beispielsweise möchten Sie möglicherweise den Übergang überspringen oder die ausgehende Übergangsanimation über JavaScript anpassen.
Es bietet auch Zugriff auf den Navigationstyp sowie die aktuellen und Ziel-Dokumenthistorieneinträge.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("pageswap", (event) => { })onpageswap = (event) => { }Ereignistyp
EinPageSwapEvent. Erbt vonEvent.
Ereigniseigenschaften
PageSwapEvent.activationSchreibgeschütztGibt ein
NavigationActivation-Objekt zurück, das den Navigationstyp sowie die aktuellen und Ziel-Dokumenthistorieneinträge für eine Navigation mit gleicher Herkunft enthält. Wenn die Navigation eine Cross-Origin-URL irgendwo in der Umleitungsfolge hat, gibt sienullzurück.PageSwapEvent.viewTransitionSchreibgeschütztGibt das
ViewTransition-Objekt zurück, das den eingehenden Cross-Dokument-View-Übergang darstellt, falls einer aktiv ist, wenn das Ereignis ausgelöst wird. Ist dies nicht der Fall, gibt esnullzurück.
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:SieheListe der Chrome DevRel-Teammitglieder für die Live-Demo, aus der dieser Code stammt.
Spezifikationen
| Specification |
|---|
| HTML # event-pageswap |