NavigationDestination

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

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

NavigationDestination 接口是 Navigation API 的一部分,代表当前导航的目标。

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

实例属性

id 只读 实验性

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

index 只读 实验性

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

key 只读 实验性

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

sameDocument 只读 实验性

如果导航的目标与当前 Document 相同,则返回 true,否则返回 false

url 只读 实验性

返回正在导航到的 URL。

实例方法

getState() 实验性

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

示例

js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  // Returns a URL() object constructed from the
  // NavigationDestination.url value
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

规范

规范
HTML
# the-navigationdestination-interface

浏览器兼容性

另见