NavigationHistoryEntry:key 属性

Limited availability

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

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

NavigationHistoryEntry 接口的 key 只读属性返回历史条目的 key,如果当前文档未完全激活,则返回空字符串。这是一个唯一的 UA 生成值,表示历史条目在条目列表中的位置。它用于通过 Navigation.traverseTo() 导航该特定位置。key 将被替换列表中条目的其他条目重用(即,如果 NavigateEvent.navigationTypereplace)。

这与历史条目的 id 不同。id 是一个唯一的 UA 生成值,它始终表示特定的历史条目,而不是其在条目列表中的位置。这对于将其与外部资源(如存储缓存)关联非常有用。

表示 NavigationHistoryEntrykey 的字符串。

示例

基本用法

js
const current = navigation.currentEntry;
console.log(current.key);

设置主页按钮

js
function initHomeBtn() {
  // 获取第一个加载条目的键,以便用户可以随时返回该视图。
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// 拦截导航事件(例如链接点击),并将其替换为单页导航
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // 导航到不同的视图,但“主页”按钮始终有效。
    },
  });
});

规范

Specification
HTML
# dom-navigationhistoryentry-key-dev

浏览器兼容性

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
key
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.

参见