Window: pageswap-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Dies ist nützlich im Fall von über Dokumente hinweggehenden (MPA) View Transitions, um eine aktive Transition von der Ausgangsseite einer Navigation aus zu manipulieren. Beispielsweise könnten Sie wünschen, die Transition zu überspringen oder die ausgehende Transition-Animation über JavaScript anzupassen.

Es bietet auch Zugriff auf den Navigationstyp sowie die aktuellen und Ziel-Dokumenthistorieneinträge.

Syntax

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

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

Ereignistyp

Ereigniseigenschaften

PageSwapEvent.activation Schreibgeschützt

Gibt ein NavigationActivation-Objekt zurück, das den Navigationstyp sowie die aktuellen und Ziel-Dokumenthistorieneinträge für eine gleichherkunftsbezogene Navigation enthält. Wenn die Navigation in der Umleitungskette eine fremdherkunftsbezogene URL hat, wird null zurückgegeben.

PageSwapEvent.viewTransition Schreibgeschützt

Gibt das ViewTransition-Objekt zurück, das die eingehende, über Dokumente hinweggehende View Transition repräsentiert, falls eine aktiv ist, wenn das Ereignis ausgelöst wird. Andernfalls 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 Mitglieder des Chrome DevRel-Teams für die Live-Demo, aus der dieser Code stammt.

Spezifikationen

Specification
HTML
# event-pageswap

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pageswap event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch