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

Question

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

• 左边部分是加载BrowserWindow的https://gmail.com
• 正确的部分是加载Gmail的另一个BrowserWindow，但我希望这两个浏览器是“独立的”，即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

你在寻找的是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')