electron 嵌入web网页的三种方式

有三种方式可以让你在Electron的BrowserWindow里集成（第三方）web内容。

iframe 和 webview和 BrowserViews 每个功能都略有不同，适用于不同的情况。

一、iframe

Iframe 在 Electron 中的行为与普通浏览器中类似，一个元素能在页面上显示外部网页，建议使用 sandbox 属性并且只允许您想要支持的功能。如果外部网页还嵌套有iframe，则获取元素复杂，还有可能出现跨域问题。

二、WebView

WebViews基于 Chromium 的 WebView，我们不能保证WebView API 在未来版本的 Electron 中仍然可用。如果想要使用标签，您需要在BrowserWindow 的 webPreferences 中设置 webviewTag 为 true。

java 复制代码

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
     	 webviewTag:true
     }

在新版本中这个标签会发生剧烈的结构变化，可能会影响应用程序的稳定性。考虑切换到其他选择，如 iframe 和Electron的 BrowserView，或避免嵌入式内容设计的架构。

三、BrowserView

BrowserView 被用来让 BrowserWindow 嵌入更多的 web 内容。它就像一个子窗口，除了它的位置是相对于父窗口，拥有独立的webContents。

BrowserView不是 DOM 的一部分，而是由主进程创建和控制。它们只是现有窗口之上的另一层 Web 内容。这意味着它们与您自己的 BrowserWindow 内容完全分离，并且它们的位置不受 DOM 或 CSS 的控制，而是通过在主进程中设置边界来控制其位置。相反，它通过在主进程中设置界面来控制。

BrowserViews 提供对其内容的最大控制，因为它们实现 webContents 的方式与 BrowserWindow 实现内容的方式类似。但是，由于BrowserViews不是 DOM 的一部分，而是覆盖在它们之上，因此您必须手动管理它们的位置。管理方式也非常简单

// 在主进程中.

javascript 复制代码

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

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  const view = new BrowserView() //创建子窗口
  win.setBrowserView(view) //自窗口设置嵌入式子窗口
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 }) //设置x，y坐标，窗口宽度和高度
  view.webContents.loadURL('https://www.electronjs.org') //加载页面
})

1.子窗口有自己独立的调试工具：

view.webContents.openDevTools()

2.执行子窗口js代码

view.webContents.executeJavaScript

3.获取窗口所有的子窗口

mainWindow.getBrowserViews().forEach

BrowserView和主进程通信

因为BrowserView有独立的webcontents，并且可以挂载proload脚本，所以它在ipc通信层面的地位和BrowserWindow完全一样，我们可以通过同样的方式，直接在主进程和它交换消息，无需经过宿主转发。不同的BrowserView之间也可以通过sendTo来互相通信。

BrowserView和宿主页面通信

正因为BrowserView的上下文是完全独立的，所以无法直接和宿主页面互通。当它需要和素主页面交换消息的时候，同样需要使用窗口对窗口的方式，交换webContentsid或者MessagePort。这是它和传统内嵌页面iframe的最大的区别。

与BrowserWindow 通信方式相同

总结

在使用过程中如果需要使用嵌入Web页面，可以使用BrowserView，因为BrowserView对新版本的Electron支持性更好，而且拥有窗口化最大控制权限