NavigationDestination:url 属性

可用性有限

此功能不是基线功能,因为它在一些最广泛使用的浏览器中无法正常工作。

实验性:这是一个实验性技术
在生产环境中使用此功能之前,请仔细查看浏览器兼容性表

urlNavigationDestination 接口的只读属性,它返回要导航到的 URL。

字符串。

示例

使用 intercept() 处理导航

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;
  }

  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:dom-navigationdestination-url-2

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅