导航
Navigation 接口是 Navigation API 的一部分，它允许在一个中心位置控制当前 window 的所有导航操作，包括以编程方式发起导航、检查导航历史条目以及管理发生的导航。
可以通过 Window.navigation 属性访问它。
Navigation API 仅暴露当前浏览上下文中的、与当前页面同源的历史条目（例如，不包括嵌入式 <iframe> 中的导航，或跨域导航），为您的应用程序提供一份准确的、仅包含先前历史条目的列表。这使得遍历历史记录的提议比使用旧的 History API 更为稳健。
实例属性
继承其父级 EventTarget 的属性。
activation只读 实验性-
返回一个
NavigationActivation对象，其中包含有关最近一次触发此 Document 的跨文档导航的信息。 canGoBack只读 实验性-
如果可能向后导航到导航历史中的上一条记录（即，
currentEntry不是历史记录列表中的第一条），则返回true；否则返回false。 canGoForward只读 实验性-
如果可能向前导航到导航历史中的下一条记录（即，
currentEntry不是历史记录列表中的最后一条），则返回true；否则返回false。 currentEntry只读 实验性-
返回一个
NavigationHistoryEntry对象，表示用户当前导航到的位置。 transition只读 实验性-
返回一个
NavigationTransition对象，表示正在进行的导航的状态，可用于跟踪该导航。如果没有正在进行的导航，则返回null。
实例方法
继承其父级 EventTarget 的方法。
back()实验性-
向后导航到导航历史中的上一条记录。
entries()实验性-
返回一个
NavigationHistoryEntry对象数组，表示所有存在的历史条目。 forward()实验性-
向前导航到导航历史中的下一条记录。
-
导航到指定的 URL，并更新历史条目列表中的任何提供的状态。
reload()实验性-
重新加载当前 URL，并更新历史条目列表中的任何提供的状态。
traverseTo()实验性-
导航到通过
key标识的特定NavigationHistoryEntry。 updateCurrentEntry()实验性-
更新
currentEntry的状态；用于状态更改独立于导航或重新加载的情况。
事件
继承其父级 EventTarget 的事件。
currententrychange实验性-
当
Navigation.currentEntry发生更改时触发。 -
当 任何类型的导航 被发起时触发，允许您根据需要进行拦截。
-
当导航失败时触发。
-
当成功的导航完成时触发。
示例
在历史记录中向前和向后移动
async function backHandler() {
if (navigation.canGoBack) {
await navigation.back().finished;
// Handle any required clean-up after
// navigation has finished
} else {
displayBanner("You are on the first page");
}
}
async function forwardHandler() {
if (navigation.canGoForward) {
await navigation.forward().finished;
// Handle any required clean-up after
// navigation has finished
} else {
displayBanner("You are on the last page");
}
}
导航到特定的历史条目
// On JS startup, get the key of the first loaded page
// so the user can always go back there.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);
// Navigate away, but the button will always work.
await navigation.navigate("/another_url").finished;
导航和更新状态
navigation.navigate(url, { state: newState });
或者
navigation.reload({ state: newState });
或者如果状态独立于导航或重新加载
navigation.updateCurrentEntry({ state: newState });
规范
| 规范 |
|---|
| HTML # navigation-interface |
浏览器兼容性
加载中…