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

Question

我想要一个 Electron window，分为两部分：

• 左边是一个BrowserWindow加载https://gmail.com

• 正确的部分也是另一个BrowserWindow加载 Gmail，但我希望这两个浏览器是“独立的”，即 cookie/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对象后，只需将它们添加到窗口即可。您还需要在拆除应用程序时删除视图。如果不这样做，您可能会遇到分段错误。

Answer 2

您正在寻找的是BrowserView

来自文档：

ABrowserView可用于将其他 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')