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

Question

我想要一个电子窗口，分为两部分：

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

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

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

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

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()
})

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

标签： javascriptgoogle-chromebrowserelectron

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对象后，只需将它们添加到窗口即可。您还需要在拆除应用程序时删除视图。如果不这样做，您可能会遇到分段错误。