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 实例属性。

🌐 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：表示最早访问的页面。
  • 索引 N：表示最近访问的页面。

🌐 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 的导航历史记录及其在历史记录中的位置，这意味着 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 (40.6.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()
})