NavigationDestination

Limited availability

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

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

导航 APINavigationDestination 接口表示当前导航中要导航到的目标。

它可通过 NavigateEvent.destination 属性访问。

实例属性

id 只读 实验性

如果 NavigateEvent.navigationTypetraverse,则返回目标 NavigationHistoryEntryid 值,否则返回空字符串。

index 只读 实验性

如果 NavigateEvent.navigationTypetraverse,则返回目标 NavigationHistoryEntryindex 值,否则返回 -1

key 只读 实验性

如果 NavigateEvent.navigationTypetraverse,则返回目标 NavigationHistoryEntrykey 值,否则返回空字符串。

sameDocument 只读 实验性

如果导航到与当前 Document 值相同的 document,则返回 true,否则返回 false

url 只读 实验性

返回导航到的 URL 地址。

实例方法

getState() 实验性

返回与目标 NavigationHistoryEntry 或导航操作(例如 navigate())相关的可用状态的克隆。

示例

js
navigation.addEventListener("navigate", (event) => {
  // 如果此导航不应被拦截,则提前退出,例如,如果导航是跨源的,或者是下载请求
  if (shouldNotIntercept(event)) {
    return;
  }

  // 返回由 NavigationDestination.url 值构造的 URL() 对象
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // URL 已更改,因此在获取新内容时显示占位符,例如旋转图标或加载页面
        renderArticlePagePlaceholder();

        // 获取新内容并在准备就绪时显示
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

规范

Specification
HTML
# the-navigationdestination-interface

浏览器兼容性

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
NavigationDestination
Experimental
getState
Experimental
id
Experimental
index
Experimental
key
Experimental
sameDocument
Experimental
url
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.

参见