webContents 属性

当我们在 Electron 中创建一个窗口时，窗口中的网页内容由 WebContents 对象表示。每个 BrowserWindow 实例都关联一个 WebContents 实例，它充当了与窗口中加载的网页进行交互的接口。它的文档地址：https://www.electronjs.org/zh/docs/latest/api/web-contents

WebContents 提供了一系列方法和事件，使您能够对窗口中的网页进行广泛的控制和操作，它的角色和功能比较类似于我们在浏览器中的 BOM 对象，用于控制窗口中加载的网页内容和与之进行交互。但它并不完全等同于 BOM 对象。

用大白话来说就是：BrowserWindow 实例操作的是窗口，WebContents操作的是窗口内渲染的网页内容。

const win = new BrowserWindow({
 width: 800,
 height: 600,
})
console.log(win.webContents);

常见事件

1. did-finish-load 当窗口中的网页加载完成时触发。

2. dom-ready 当窗口中的网页文档完成解析并可供操作时触发。

3. did-fail-load 当窗口中的网页加载失败时触发。

4. did-start-loading 当窗口开始加载网页时触发。

5. did-stop-loading 当窗口停止加载网页时触发。

6. page-title-updated 当窗口中的网页标题发生变化时触发。

7. did-navigate 当窗口中的网页导航到新的 URL 时触发。

8. did-navigate-in-page 当窗口中的网页发生内部导航（锚点跳转等）时触发。

9. did-frame-finish-load 当一个子框架加载完成时触发。

10. did-start-navigation 当窗口开始导航到新的 URL 时触发。

11. did-stop-navigation 当窗口停止导航时触发。

12. will-navigate 当窗口即将导航到新的 URL 时触发。

 const win = new BrowserWindow({
   width: 800,
   height: 600,
 })
 win.loadFile('index.html')
win.webContents.on('dom-ready', () => {
  console.log('DOM解析完毕');
})
win.webContents.on('did-finish-load', () => {
  console.log('网页加载完毕');
})

以上仅列出部分事件，更多的可以参考其官方文档。

常见方法

1. loadURL(url[, options]) 加载指定的 URL 到窗口中，可以是本地文件路径或远程 URL。

2. reload() 重新加载窗口中的网页。

3. goBack() 在网页浏览历史记录中后退一个页面。

4. goForward() 在网页浏览历史记录中前进一个页面。

5. stop() 停止窗口中正在加载的网页。

6. executeJavaScript(code[, userGesture]) 在窗口中执行给定的 JavaScript 代码。

7. insertCSS(css) 将指定的 CSS 代码注入到窗口中加载的网页中。

8. openDevTools([options]) 打开开发者工具，用于调试和检查窗口中的网页内容。

9. closeDevTools() 关闭开发者工具。

10. getTitle() 获取窗口中当前加载的网页的标题。

11. getURL() 获取窗口当前加载的网页的 URL。

12. isLoading() 检查窗口中是否正在加载网页。

13. isDestroyed() 检查 WebContents 对象是否已被销毁。

14. clearHistory() 清除窗口中网页的导航历史记录。

其它更多方法，请参看文档。

const win = new BrowserWindow({
  width: 800,
  height: 600,
})
win.loadFile('index.html')
win.webContents.loadFile('html/test.html')