导航激活

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

NavigationActivation 是 导航 API 的一个接口，表示最近的跨文档导航。它包含导航类型以及传出和传入文档历史记录条目。

可以通过 PageSwapEvent.activation 和 Navigation.activation 属性访问此对象。请注意，在每种情况下，NavigationActivation 都表示不同的导航。

  • Navigation.activation 表示有关导航到当前页面的信息。
  • PageSwapEvent.activation 表示有关导航到下一页面的信息。

实例属性

entry 只读

包含一个 NavigationHistoryEntry 对象，该对象表示导航中传入（“到”）文档的历史记录条目。这等效于在传入文档被激活时 Navigation.currentEntry 属性。

from 只读

包含一个 NavigationHistoryEntry 对象，该对象表示导航中传出（“来自”）文档的历史记录条目。

包含一个字符串，指示导航类型。

示例

js
window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Went to profile page
    // ~> Set VT names on the main title and image
    if (isProfilePage(currentUrl)) {
      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

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

规范

规范
HTML 标准
# navigationactivation

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅