NavigateEvent

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

NavigateEvent 介面是 Navigation API 的一個介面，它是 navigate 事件的事件物件。當任何型別的導航被髮起時（這包括使用 History API 的功能，例如 History.go()），該事件就會觸發。NavigateEvent 提供了訪問有關該導航的資訊，並允許開發者攔截和控制導航的處理。

建構函式

NavigateEvent() Experimental: 建立一個新的 NavigateEvent 物件例項。

例項屬性

繼承其父級 Event 的屬性。

canIntercept Read only Experimental: 如果導航可以被攔截，則返回 true，否則返回 false（例如，您無法攔截跨域導航）。
destination Read only Experimental: 返回一個 NavigationDestination 物件，該物件表示正在導航到的目標。
downloadRequest Read only Experimental: 在下載導航的情況下（例如，帶有 download 屬性的 <a> 或 <area> 元素），返回被請求下載的檔名，否則返回 null。
formData Read only Experimental: 在 POST 表單提交的情況下，返回表示提交資料的 FormData 物件，否則返回 null。
hashChange Read only Experimental: 如果導航是片段導航（即導航到同一文件中的片段識別符號），則返回 true，否則返回 false。
hasUAVisualTransition Read only Experimental: 如果在分發此事件之前，使用者代理為此導航執行了視覺過渡，則返回 true，否則返回 false。
info Read only Experimental: 返回由發起導航操作（例如 Navigation.back() 或 Navigation.navigate()）傳遞的 info 資料值，如果未傳遞 info 資料，則返回 undefined。
navigationType Read only Experimental: 返回導航的型別 — push、reload、replace 或 traverse。
signal Read only Experimental: 返回一個 AbortSignal，如果導航被取消（例如，使用者點選了瀏覽器的“停止”按鈕，或者開始了另一個導航並因此取消了當前導航），該訊號將變為中止狀態。
sourceElement Read only Experimental: 當導航是由一個元素髮起的（例如點選連結時），則返回一個表示發起元素的 Element 物件。
userInitiated Read only Experimental: 如果導航是由使用者發起的（例如，透過點選連結、提交表單或按下瀏覽器的“後退/前進”按鈕），則返回 true，否則返回 false。

例項方法

繼承其父級 Event 的方法。

intercept() Experimental: 攔截此導航，將其轉換為同文檔導航到 destination URL。它可以接受一個處理函式來定義導航處理行為，以及 focusReset 和 scroll 選項來按需控制行為。
scroll() Experimental: 如果要在導航處理完成之前觸發瀏覽器驅動的滾動行為，可以呼叫此方法來手動觸發它。

示例

使用 `intercept()` 處理導航

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

注意： 在 Navigation API 可用之前，要實現類似的功能，您需要監聽連結上的所有點選事件，執行 e.preventDefault()，執行適當的 History.pushState() 呼叫，然後根據新 URL 設定頁面檢視。而且這不會處理所有導航 — 只會處理使用者發起的連結點選。

使用 `scroll()` 處理滾動

在這個攔截導航的例子中，handler() 函式首先獲取並渲染一些文章內容，然後獲取並渲染一些次要內容。一旦主要文章內容可用，立即將頁面滾動到該內容是有意義的，以便使用者可以與之互動，而不是等到次要內容也渲染完成。為了實現這一點，我們在兩者之間添加了一個 scroll() 呼叫。

navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(navigateEvent)) return;
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);

        event.scroll();

        const secondaryContent = await getSecondaryContent(url.pathname);
        addSecondaryContent(secondaryContent);
      },
    });
  }
});

規範

規範
HTML # the-navigateevent-interface

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ⁨2025年7月3日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題