Question

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

左边是BrowserWindow加载的https://gmail.com
右侧是另外一个BrowserWindow也在加载Gmail，但是我希望这两个浏览器是“独立的”，即cookie / LocalStorage / etc。应该独立（例如，如果我们有普通的Chrome窗口和隐身窗口）；因此，允许在左侧有一个Gmail帐户，在右侧有另一个帐户
单个电子窗口顶部的其他一些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

从文档中：

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')

同一电子窗口中的两个浏览器

2 个答案: