Window: `pageswap`-Ereignis

Das pageswap-Ereignis wird ausgelöst, wenn Sie zwischen Dokumenten navigieren, sobald das vorherige Dokument entladen wird.

Dies ist nützlich im Fall von Cross-Dokument (MPA) View-Transitions, um einen aktiven Übergang von der Ausgangsseite einer Navigation zu manipulieren. Zum Beispiel möchten Sie vielleicht den Übergang überspringen oder die ausgehende Übergangsanimation über JavaScript anpassen.

Es bietet außerdem Zugriff auf den Navigationstyp sowie die aktuellen und Ziel-Dokument-Historiendaten.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("pageswap", (event) => {});
onpageswap = (event) => {};

Ereignistyp

Ein PageSwapEvent. Erbt von Event.

Event PageSwapEvent

Ereigniseigenschaften

PageSwapEvent.activation Schreibgeschützt

Gibt ein NavigationActivation-Objekt zurück, das den Navigationstyp sowie die aktuellen und Ziel-Dokument-Historiendaten für eine Same-Origin-Navigation enthält. Wenn die Navigation eine Cross-Origin-URL irgendwo in der Umleitkette enthält, wird null zurückgegeben.

PageSwapEvent.viewTransition Schreibgeschützt

Gibt 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, wird null zurückgegeben.

Beispiele

js
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: Siehe Liste der Teammitglieder von Chrome DevRel für die Live-Demo, aus der dieser Code stammt.

Spezifikationen

Specification
HTML Standard
# event-pageswap

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch