同一个 Electron 窗口中的两个浏览器

Question

我想要一个单独的 Electron 窗口，分成两部分：

• 左边部分是BrowserWindow正在加载https://gmail.com

• 右边部分是另一个BrowserWindow也在加载Gmail，但我希望这两个浏览器是“独立的”，即cookies/LocalStorage/等。应该是独立的（就像我们有一个普通的 Chrome 窗口和一个隐身窗口）；因此允许在左侧连接一个 Gmail 帐户/在右侧连接另一个帐户

• 单个 Electron 窗口顶部的一些其他 UI 按钮。

此代码有效，但它创建了 2 个窗口而不是 1 个：

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

app.once('ready', () => {
  let win = new BrowserWindow({show: false})
  win.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win.loadURL('https://www.gmail.com')
  win.show()

  let win2 = new BrowserWindow({show: false})
  win2.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win2.loadURL('https://www.gmail.com')
  win2.show()
})

如何将它们放在一个窗口中？

Answer 1

有点晚了，但要在一个窗口中添加两个浏览器，您必须使用BrowserWindow.addBrowserView 而不是BrowserWindow.setBrowserView。您将获得以下信息：

const { BrowserView, BrowserWindow, app } = require('electron')
function twoViews () {
  const win = new BrowserWindow({ width: 800, height: 600 })

  const view = new BrowserView()
  win.addBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 400, height: 300 })
  view.webContents.loadURL('https://electronjs.org')

  const secondView = new BrowserView()
  win.addBrowserView(secondView)
  secondView.setBounds({ x: 400, y: 0, width: 400, height: 300 })
  secondView.webContents.loadURL('https://electronjs.org')
  app.on('window-all-closed', () => {
    win.removeBrowserView(secondView)
    win.removeBrowserView(view)
    app.quit()
  })
}

app.whenReady().then(twoViews)

创建两个BrowserView 对象后，只需将它们添加到窗口即可。您还需要在拆除应用程序时删除视图。如果不这样做，您可能会遇到分段错误。

Answer 2

你要找的是BrowserView

来自文档：

BrowserView 可用于将其他 Web 内容嵌入到 BrowserWindow。它就像一个子窗口，只是它相对于它的所属窗口定位。它旨在替代webview 标签。

看起来这就是你想要的，视图可以呈现单独的 HTML 页面并将它们相对定位在同一个浏览器窗口中。

// In the main process.
const { BrowserView, BrowserWindow } = require('electron')

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

let view = new BrowserView({
  webPreferences: {
    nodeIntegration: false
  }
})
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')