跳转至

导航历史

概述

NavigationHistory 类允许你管理并与 Electron 应用的浏览历史进行交互。这一强大功能使你能够为用户创建直观的导航体验。

访问 NavigationHistory

导航历史按 WebContents 实例存储。要访问 NavigationHistory 类的特定实例，请使用 WebContents 类的 contents.navigationHistory 实例属性。

const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow()
const { navigationHistory } = mainWindow.webContents

轻松实现后退和前进导航：

```js @ts-type={navigationHistory:Electron.NavigationHistory} // Go back if (navigationHistory.canGoBack()) { navigationHistory.goBack() }

// Go forward if (navigationHistory.canGoForward()) { navigationHistory.goForward() } 

## 访问历史记录条目 {#accessing-history-entries}

获取并显示用户的浏览历史：

```js @ts-type={navigationHistory:Electron.NavigationHistory}
const entries = navigationHistory.getAllEntries()

entries.forEach((entry) => {
  console.log(`${entry.title}: ${entry.url}`)
})

每个导航条目对应一个特定页面。索引系统遵循顺序：

  • 索引 0：表示最早访问的页面。
  • 索引 N：表示最近访问的页面。

允许用户跳转到其浏览历史中的任意位置：

```js @ts-type={navigationHistory:Electron.NavigationHistory} // Navigate to the 5th entry in the history, if the index is valid navigationHistory.goToIndex(4)

// Navigate to the 2nd entry forward from the current position if (navigationHistory.canGoToOffset(2)) { navigationHistory.goToOffset(2) } 

## 恢复历史记录 {#restoring-history}

一个常见流程是你希望恢复 webContents 的历史记录——例如实现“撤销关闭标签页”功能。为此，你可以调用 `navigationHistory.restore({ index, entries })`。这将恢复 webContent 的导航历史以及 webContents 在该历史中的位置，这意味着 `goBack()` 和 `goForward()` 会按预期在栈中导航。

```js @ts-type={navigationHistory:Electron.NavigationHistory}
const firstWindow = new BrowserWindow()

// Later, you want a second window to have the same history and navigation position
async function restore () {
  const entries = firstWindow.webContents.navigationHistory.getAllEntries()
  const index = firstWindow.webContents.navigationHistory.getActiveIndex()

  const secondWindow = new BrowserWindow()
  await secondWindow.webContents.navigationHistory.restore({ index, entries })
}

以下是你可以在 Electron Fiddle 中打开的完整示例：

fiddle docs/fiddles/features/navigation-history

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron