javascript - Why does only one BrowserView work with Electron?

Question

I'm trying to have two BrowserView in the same window, side by side. This code runs:

const { app, BrowserWindow, BrowserView } = require('electron');
function createWindow() {
    browserWindow = new BrowserWindow({ width: 1200, height: 600 });
    let browserView1 = new BrowserView({ webPreferences: { nodeIntegration: false }});
    let browserView2 = new BrowserView({ webPreferences: { nodeIntegration: false }});
    browserWindow.setBrowserView(browserView1);
    browserWindow.setBrowserView(browserView2);
    browserView1.setBounds({ x: 0, y: 0, width: 600, height: 600 });
    browserView2.setBounds({ x: 600, y: 0, width: 600, height: 600 });
    browserView1.webContents.loadURL('https://www.example.com');
    browserView2.webContents.loadURL('https://www.google.com');
    browserWindow.on('closed', function () { browserWindow = null; });
}
app.on('ready', createWindow);

but only the second BrowserView is displayed.

How to have both displayed?

标签： javascriptgoogle-chromebrowserelectron

Answer 1

目前BrowserView是 Electron 的一个实验特性。它的大部分功能仍处于 Electron 的 beta 版本中。由于这仍然只在 Electron 的 beta 版本中使用，因此在生产版本中使用是不安全的。

话虽如此，我们仍然可以让它工作。首先，安装 Electron 测试版npm install --save electron@v5.0.0-beta.5。

然后更改您的电子文件：

const { app, BrowserWindow, BrowserView } = require('electron');
function createWindow() {
    browserWindow = new BrowserWindow({ width: 1200, height: 600 });
    let browserView1 = new BrowserView({ webPreferences: { nodeIntegration: false }});
    let browserView2 = new BrowserView({ webPreferences: { nodeIntegration: false }});
    browserWindow.addBrowserView(browserView1);
    browserWindow.addBrowserView(browserView2);
    browserView1.setBounds({ x: 0, y: 0, width: 600, height: 600 });
    browserView2.setBounds({ x: 600, y: 0, width: 600, height: 600 });
    browserView1.webContents.loadURL('https://www.example.com');
    browserView2.webContents.loadURL('https://www.google.com');
    browserWindow.on('closed', function () { browserWindow = null; });
}
app.on('ready', createWindow);

而不是使用setBrowserView()use addBrowserView()。

git 上的功能请求