深入了解 Electron 中的 WebView、BrowserWindow 和 BrowserView 窗口生命周期

在 Electron 中，有三个重要的窗口组件：WebView、BrowserWindow 和 BrowserView。本文将深入介绍这三个窗口的生命周期以及相关事件。

WebView 窗口生命周期：

WebView 是用于嵌入网页的组件，它可以加载和显示网页内容。在 WebView 中，有多个生命周期事件可以监听：

• dom-ready：当 WebView 中的网页 DOM 准备就绪时触发该事件。
• did-start-loading：当 WebView 开始加载网页内容时触发该事件。
• did-stop-loading：当 WebView 停止加载网页内容时触发该事件。
• did-finish-load：当 WebView 加载网页内容完成时触发该事件。
• did-fail-load：当 WebView 加载网页失败时触发该事件。

下面是示例代码：

const { WebView } = require('electron')

const webview = new WebView()
webview.src = 'https://example.com'
webview.addEventListener('dom-ready', () => {
  console.log('WebView DOM is ready.')
})

webview.addEventListener('did-start-loading', () => {
  console.log('WebView started loading the page.')
})

webview.addEventListener('did-stop-loading', () => {
  console.log('WebView stopped loading the page.')
})

webview.addEventListener('did-finish-load', () => {
  console.log('WebView finished loading the page.')
})

webview.addEventListener('did-fail-load', (event) => {
  console.error(event.errorDescription)
  console.error(event.validatedURL)
})

BrowserWindow 窗口生命周期：

BrowserWindow 是 Electron 的窗口组件，用于创建和管理应用程序的主窗口。它也有多个生命周期事件可供监听：

• ready-to-show：当 BrowserWindow 准备好展示时触发该事件。
• show：当 BrowserWindow 被展示时触发该事件。
• hide：当 BrowserWindow 被隐藏时触发该事件。
• focus：当 BrowserWindow 获得焦点时触发该事件。
• blur：当 BrowserWindow 失去焦点时触发该事件。
• closed：当 BrowserWindow 被关闭时触发该事件。

下面是示例代码：

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

win.on('ready-to-show', () => {
  win.show()
})

win.on('show', () => {
  console.log('Window is shown.')
})

win.on('hide', () => {
  console.log('Window is hidden.')
})

win.on('focus', () => {
  console.log('Window is in focus.')
})

win.on('blur', () => {
  console.log('Window is out of focus.')
})

win.on('closed', () => {
  console.log('Window is closed.')
})

BrowserView 窗口生命周期：

BrowserView 是 Electron 的另一个窗口组件，用于创建和管理嵌入在 BrowserWindow 中的视图。它有两个生命周期事件：

• did-attach：当 BrowserView 被附加到 BrowserWindow 中时触发该事件。
• did-detach：当 BrowserView 从 BrowserWindow 中移除时触发该事件。

下面是示例代码：

const { BrowserWindow, BrowserView } = require('electron')

const win = new BrowserWindow()
const view = new BrowserView()

win.setBrowserView(view)
view.webContents.loadURL('https://example.com')

view.addEventListener('did-attach', () => {
  console.log('BrowserView is attached.')
})

view.addEventListener('did-detach', () => {
  console.log('BrowserView is detached.')
})

以上是 Electron 中 WebView、BrowserWindow 和 BrowserView 窗口的生命周期介绍，详细了解窗口的生命周期和事件可以帮助我们更好地管理应用程序的窗口。在实际开发中，根据需要，可以监听相应的事件，并编写逻辑代码以满足应用程序的需求。

本文永久链接: https://www.mulianju.com/electron-webview-browserWindow-browserView-hooks/