electron webview 页面加载事件顺序

在 Electron 中，`webview` 元素的页面加载事件顺序如下：

1. `did-start-loading`: 当页面开始加载时触发。
2. `did-frame-finish-load`: 当页面中的所有子框架都加载完成时触发。
3. `did-finish-load`: 当页面完全加载完成时触发。
4. `dom-ready`: 当页面的 DOM 树已经准备好时触发。
5. `did-stop-loading`: 当页面停止加载时触发。

需要注意的是，`dom-ready` 事件在 `did-frame-finish-load` 和 `did-finish-load` 事件之后才会触发。此外，`did-frame-finish-load` 事件可能会多次触发，因为页面中可能包含多个子框架。

相关问题

electron webview 进度条加载显示

在 Electron 中，可以通过 `webContents` 对象来控制 `webview` 的进度条显示。具体步骤如下：

1. 在渲染进程中，通过 `require('electron')` 获取 `remote` 对象，并从中获取 `webContents` 对象。

const { remote } = require('electron')
const webContents = remote.getCurrentWebContents()

2. 监听 `webview` 的 `did-start-loading` 和 `did-stop-loading` 事件，并在这些事件中更新进度条状态。

webview.addEventListener('did-start-loading', () => {
  webContents.setProgressBar(0.5) // 显示进度条，并设置进度为 50%
})

webview.addEventListener('did-stop-loading', () => {
  webContents.setProgressBar(-1) // 隐藏进度条
})

3. 如果需要在进度条中显示当前加载进度，可以监听 `webview` 的 `did-finish-load` 事件，并在其中获取当前加载进度并更新进度条状态。

webview.addEventListener('did-finish-load', () => {
  const progress = webview.getWebContents().getURL() // 获取当前加载进度
  webContents.setProgressBar(progress) // 更新进度条状态
})

注意，以上代码中的 `webview` 是指 `webview` 标签的 DOM 元素。如果需要使用 JavaScript 创建 `webview`，可以使用 Electron 提供的 `WebView` 构造函数，并将其添加到 DOM 中。如下所示：

const { WebView } = require('electron')

const webview = new WebView()
document.body.appendChild(webview)

electron webview preload

Electron中的webview是一个可以嵌入其他网页的组件，而preload则是在webview中加载的预处理脚本。它可以在webview中的渲染进程中执行一些操作，例如向主进程发送消息或者修改DOM元素。但是需要注意的是，由于webview是在独立的渲染进程中运行的，因此无法直接访问主进程中的代码和变量。为了解决这个问题，可以在创建webview时设置preload属性，将预处理脚本引入到webview中，从而在webview中可以访问主进程中的代码和变量。

然而，需要注意的是，由于webview是在独立的渲染进程中运行的，因此无法触发在主窗口或者其他webview中定义的事件。如果需要在webview中触发事件，可以在webview中引入预处理脚本，并在预处理脚本中定义事件处理函数。