Navigation API 僅暴露當前瀏覽上下文中的、與當前頁面同源的歷史條目（例如，不包括嵌入式 <iframe> 中的導航，或跨域導航），為您的應用程式提供一份準確的、僅包含先前歷史條目的列表。這使得遍歷歷史記錄的提議比使用舊的 History API 更為穩健。

例項屬性

繼承其父級 EventTarget 的屬性。

activation 只讀實驗性: 返回一個 NavigationActivation 物件，其中包含有關最近一次觸發此 Document 的跨文件導航的資訊。
canGoBack 只讀實驗性: 如果可能向後導航到導航歷史中的上一條記錄（即，currentEntry 不是歷史記錄列表中的第一條），則返回 true；否則返回 false。
canGoForward 只讀實驗性: 如果可能向前導航到導航歷史中的下一條記錄（即，currentEntry 不是歷史記錄列表中的最後一條），則返回 true；否則返回 false。
currentEntry 只讀實驗性: 返回一個 NavigationHistoryEntry 物件，表示使用者當前導航到的位置。
transition 只讀實驗性: 返回一個 NavigationTransition 物件，表示正在進行的導航的狀態，可用於跟蹤該導航。如果沒有正在進行的導航，則返回 null。

例項方法

繼承其父級 EventTarget 的方法。

back() 實驗性: 向後導航到導航歷史中的上一條記錄。
entries() 實驗性: 返回一個 NavigationHistoryEntry 物件陣列，表示所有存在的歷史條目。
forward() 實驗性: 向前導航到導航歷史中的下一條記錄。
navigate() 實驗性: 導航到指定的 URL，並更新歷史條目列表中的任何提供的狀態。
reload() 實驗性: 重新載入當前 URL，並更新歷史條目列表中的任何提供的狀態。
traverseTo() 實驗性: 導航到透過 key 標識的特定 NavigationHistoryEntry。
updateCurrentEntry() 實驗性: 更新 currentEntry 的狀態；用於狀態更改獨立於導航或重新載入的情況。

事件

繼承其父級 EventTarget 的事件。

currententrychange 實驗性: 當 Navigation.currentEntry 發生更改時觸發。
navigate 實驗性: 當任何型別的導航被髮起時觸發，允許您根據需要進行攔截。
navigateerror 實驗性: 當導航失敗時觸發。
navigatesuccess 實驗性: 當成功的導航完成時觸發。

示例

在歷史記錄中向前和向後移動

async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the first page");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the last page");
  }
}

導航到特定的歷史條目

// On JS startup, get the key of the first loaded page
// so the user can always go back there.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// Navigate away, but the button will always work.
await navigation.navigate("/another_url").finished;

導航和更新狀態

navigation.navigate(url, { state: newState });

或者

navigation.reload({ state: newState });

或者如果狀態獨立於導航或重新載入

navigation.updateCurrentEntry({ state: newState });

規範

規範
HTML # navigation-interface

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 3 日，作者： MDN 貢獻者。

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