Window: pageswap 事件

实验性功能： 这是一个 实验性技术
在生产环境中使用前，请仔细查看 浏览器兼容性表格。

当您在文档之间导航时，在先前文档即将卸载时会触发 pageswap 事件。

这在跨文档 (MPA) 视图转换 中非常有用，用于操作导航出站页面的活动转换。例如，您可能希望跳过转换，或通过 JavaScript 自定义出站转换动画。

它还提供对导航类型以及当前和目标文档历史记录条目的访问。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

事件类型

一个 PageSwapEvent。继承自 Event。

Event PageSwapEvent

事件属性

PageSwapEvent.activation 只读

返回一个 NavigationActivation 对象，其中包含同源导航的导航类型以及当前和目标文档历史记录条目。如果导航在重定向链中的任何位置都有跨源 URL，则返回 null。

PageSwapEvent.viewTransition 只读

返回表示入站跨文档视图转换的 ViewTransition 对象（如果在触发事件时处于活动状态）。如果不是这种情况，则返回 null。

示例

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";
    }
  }
});

注意：有关此代码所取自的实时演示，请参阅 Chrome DevRel 团队成员列表。

规范

规范
HTML 标准
# event-pageswap

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅