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

瀏覽器相容性

另見