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

Question

我想要一个 Electron 窗口 ，分为两部分:

左边是 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()
})

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

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