Skip to main content

导航历史记录

¥Navigation History

概述​

¥Overview

NavigationHistory 类允许你管理和与 Electron 应用的浏览历史记录交互。此强大功能可让你为用户创建直观的导航体验。

¥The NavigationHistory class allows you to manage and interact with the browsing history of your Electron application. This powerful feature enables you to create intuitive navigation experiences for your users.

访问导航历史记录​

¥Accessing NavigationHistory

每个 WebContents 实例都存储导航历史记录。要访问 NavigationHistory 类的特定实例，请使用 WebContents 类的 contents.navigationHistory instance property。

¥Navigation history is stored per WebContents instance. To access a specific instance of the NavigationHistory class, use the WebContents class's contents.navigationHistory instance property.

const { BrowserWindow } = require('electron')

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

¥Navigating through history

轻松实现前后导航：

¥Easily implement back and forward navigation:

// Go back
if (navigationHistory.canGoBack()) {
  navigationHistory.goBack()
}

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

访问历史记录条目​

¥Accessing history entries

检索并显示用户的浏览历史记录：

¥Retrieve and display the user's browsing history:

const entries = navigationHistory.getAllEntries()

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

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

¥Each navigation entry corresponds to a specific page. The indexing system follows a sequential order:

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

    ¥Index 0: Represents the earliest visited page.

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

    ¥Index N: Represents the most recent page visited.

¥Navigating to specific entries

允许用户跳转到浏览历史记录中的任何点：

¥Allow users to jump to any point in their browsing history:

// 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() 将按预期引导你浏览堆栈。

¥A common flow is that you want to restore the history of a webContents - for instance to implement an "undo close tab" feature. To do so, you can call navigationHistory.restore({ index, entries }). This will restore the webContent's navigation history and the webContents location in said history, meaning that goBack() and goForward() navigate you through the stack as expected.


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 打开的完整示例：

¥Here's a full example that you can open with Electron Fiddle:

docs/fiddles/features/navigation-history (35.0.0)Open in Fiddle
const { app, BrowserWindow, BrowserView, ipcMain } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  mainWindow.loadFile('index.html')

  const view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({ x: 0, y: 100, width: 1000, height: 800 })
  view.setAutoResize({ width: true, height: true })

  const navigationHistory = view.webContents.navigationHistory
  ipcMain.handle('nav:back', () =>
    navigationHistory.goBack()
  )

  ipcMain.handle('nav:forward', () => {
    navigationHistory.goForward()
  })

  ipcMain.handle('nav:canGoBack', () => navigationHistory.canGoBack())
  ipcMain.handle('nav:canGoForward', () => navigationHistory.canGoForward())
  ipcMain.handle('nav:loadURL', (_, url) =>
    view.webContents.loadURL(url)
  )
  ipcMain.handle('nav:getCurrentURL', () => view.webContents.getURL())
  ipcMain.handle('nav:getHistory', () => {
    return navigationHistory.getAllEntries()
  })

  view.webContents.on('did-navigate', () => {
    mainWindow.webContents.send('nav:updated')
  })

  view.webContents.on('did-navigate-in-page', () => {
    mainWindow.webContents.send('nav:updated')
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})