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)