Two browsers in the same Electron window
A little late, but to add two browsers within one window you have to use BrowserWindow.addBrowserView
instead of BrowserWindow.setBrowserView
. You'll get the following:
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)
Once you create two BrowserView
objects, you just add them to the window. You'll also want to remove the views when tearing down the application. If you don't you might get a segmentation fault.
What you are looking for is BrowserView
From the docs:
A
BrowserView
can be used to embed additional web content into aBrowserWindow
. It is like a child window, except that it is positioned relative to its owning window. It is meant to be an alternative to thewebview
tag.
It looks like this is what you want, the views can render separate HTML pages and position them relatively inside the same browser window.
// 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')