Navigation

Limited availability

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

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

导航 API 的 Navigation 接口允许在一个核心位置控制当前 window 的所有导航操作，包括以编程方式启动导航、检查导航历史记录条目以及在导航发生时管理导航。

它是通过 Window.navigation 属性访问的。

导航 API 仅公开在当前浏览上下文中创建的与当前页面同源的历史记录条目（例如，不是嵌入的 <iframe> 内的导航或跨源导航），为你的应用提供所有先前历史记录条目的准确列表。与旧版历史记录 API 相比，这使得遍历历史记录变得不那么脆弱。

实例属性

从其父接口 EventTarget 继承属性。

activation 只读实验性: 返回一个 NavigationActivation 对象，其中包含有关“激活”此文档的最新跨文档导航的信息。
canGoBack 只读实验性: 如果可以在导航历史记录中向后导航（即 currentEntry 不是历史记录条目列表中的第一个），则返回 true，如果不能，则返回 false。
canGoForward 只读实验性: 如果可以在导航历史记录中向前导航（即 currentEntry 不是历史记录条目列表中的最后一个），则返回 true，如果不能，则返回 false。
currentEntry 只读实验性: 返回一个 NavigationHistoryEntry 对象，表示用户当前导航到的历史记录。
transition 只读实验性: 返回一个 NavigationTransition 对象，表示正在进行的导航的状态，可用于跟踪导航。如果当前没有正在进行的导航，则返回 null。

实例方法

从其父接口 EventTarget 继承方法。

back() 实验性: 在导航历史记录中向后导航一个条目。
entries() 实验性: 返回一个 NavigationHistoryEntry 对象数组，代表所有现有的历史记录条目。
forward() 实验性: 在导航历史记录中向前导航一个条目。
navigate() 实验性: 导航到特定的 URL，更新历史记录条目列表中提供的任何状态。
reload() 实验性: 重新加载当前 URL，更新历史记录条目列表中提供的任何状态。
traverseTo() 实验性: 导航到由 key 标识的特定 NavigationHistoryEntry。
updateCurrentEntry() 实验性: 更新 currentEntry 的状态；用于状态改变与导航或重新加载无关的情况。

事件

从其父级接口 EventTarget 继承事件。

currententrychange 实验性: 当 Navigation.currentEntry 发生改变时触发。
navigate 实验性: 开始时触发，允许你根据需要进行拦截。
navigateerror 实验性: 导航失败时触发。
navigatesuccess 实验性: 导航成功完成后触发。

示例

在历史记录中前进和后退

async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // 导航结束后处理任何必要的清理工作
  } else {
    displayBanner("你在第一页");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // 导航结束后处理任何必要的清理工作
  } else {
    displayBanner("你在最后一页");
  }
}

遍历到特定的历史记录条目

// 在 JS 启动时，获取第一个加载页面的键，以便用户可以随时返回该页面。
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// 导航离开，但按钮始终有效。
await navigation.navigate("/another_url").finished;

导航和更新状态

navigation.navigate(url, { state: newState });

或

navigation.reload({ state: newState });

或者如果状态独立于导航或重新加载：

navigation.updateCurrentEntry({ state: newState });

规范

Specification
HTML # navigation-interface

浏览器兼容性

BCD tables only load in the browser