NavigationActivation

Limited availability

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

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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

此对象可通过 PageSwapEvent.activationNavigation.activation 属性访问。请注意,在各情况下,NavigationActivation 都表示不同的导航:

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

实例属性

entry 只读 实验性

包含一个 NavigationHistoryEntry 对象,表示导航中传入(“目标”)的文档历史记录条目。这相当于传入文档被激活时的 Navigation.currentEntry 属性。

from 只读 实验性

包含一个 NavigationHistoryEntry 对象,代表导航中传出(“来自”)的文档历史记录条目。

包含指示导航类型的字符串。

示例

js
window.addEventListener("pagereveal", async (e) => {
  // 如果“from”历史记录条目不存在,则返回
  if (!navigation.activation.from) return;

  // 仅当存在活动视图过渡时才运行此操作
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // 从个人资料页面转到主页 ~> 在相关列表项上设置 VT 名称
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // 在要设置动画的元素上设置 view-transition-name 值
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // 拍摄快照后删除名称,以便我们为下一次导航做好准备
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // 进入个人资料页面 ~> 在主标题和图片上设置 VT 名称
    if (isProfilePage(currentUrl)) {
      // 在要设置动画的元素上设置 view-transition-name 值
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // 拍摄快照后删除名称,以便我们为下一次导航做好准备
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

备注: 请参阅 Chrome DevRel 团队成员列表,查看此代码所摘录的在线示例。

规范

Specification
HTML
# navigationactivation

浏览器兼容性

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
NavigationActivation
Experimental
entry
Experimental
from
Experimental
navigationType
Experimental

Legend

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

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见