跳到主要內容

導航歷史記錄

概觀​

NavigationHistory 類別可讓您管理 Electron 應用程式的瀏覽歷史記錄並與之互動。這項強大的功能讓您能夠為使用者建立直覺式的導航體驗。

存取 NavigationHistory​

導航歷史記錄是依 WebContents 實例儲存的。若要存取 NavigationHistory 類別的特定實例，請使用 WebContents 類別的 contents.navigationHistory 實例屬性。

const { BrowserWindow } = require('electron')

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

輕鬆實作返回和前進導航

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

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

存取歷史記錄項目​

擷取並顯示使用者的瀏覽歷史記錄

const entries = navigationHistory.getAllEntries()

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

每個導航項目都對應到特定的頁面。索引系統遵循循序順序

  • 索引 0：代表最早瀏覽的頁面。
  • 索引 N：代表最近瀏覽的頁面。

允許使用者跳轉到其瀏覽歷史記錄中的任何點

// 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)
}

還原歷史記錄​

常見的流程是您想要還原 webContents 的歷史記錄，例如實作「復原關閉分頁」功能。若要執行此操作，您可以呼叫 navigationHistory.restore({ index, entries })。這將還原 webContent 的導航歷史記錄和 webContents 在該歷史記錄中的位置，這表示 goBack() 和 goForward() 會如預期般導航您瀏覽堆疊。


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 開啟

docs/fiddles/features/navigation-history (35.0.1)在 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()
})