PageSwapEvent

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

PageSwapEvent 事件对象在 pageswap 事件的处理函数内部可用。

当您在文档之间导航时，在之前的文档即将卸载时，会触发 pageswap 事件。在跨文档导航期间，PageSwapEvent 事件对象允许您从被导航的文档中操作相关的 视图过渡（提供对相关 ViewTransition 对象的访问权限），如果视图过渡是由导航触发的。它还提供对导航类型以及当前和目标文档的信息的访问权限。

构造函数

PageSwapEvent()

创建一个新的 PageSwapEvent 对象实例。

实例属性

activation 只读

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

viewTransition 只读

包含一个 ViewTransition 对象，表示跨文档导航的活动视图过渡。

示例

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 标准
# the-pageswapevent-interface

浏览器兼容性

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

另请参阅