How to have multiple BrowserWindows

To create multiple BrowserWindows in Electron, you can use the BrowserWindow class which provides an API for creating and managing windows. To create a new window, you can call the new BrowserWindow() constructor. Here's an example code:

// main.js

const { app, BrowserWindow } = require('electron')

let mainWindow
let secondWindow

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

function createSecondWindow() {
  secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    }
  })

  secondWindow.loadFile('second.html')

  secondWindow.on('closed', function () {
    secondWindow = null
  })
}

app.on('ready', function () {
  createMainWindow()
  createSecondWindow()
})

In this example, we define two functions createMainWindow() and createSecondWindow() to create two windows. We call these functions in the app.on('ready') event handler which is triggered when the Electron app is ready to start. We also define event listeners for the closed event to clean up the window object when the window is closed.

To have two pages in one window in Electron, you can use the BrowserView API which provides a way to embed web content into your Electron app. Here's an example code:

// main.js

const { app, BrowserWindow, BrowserView } = require('electron')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  const view1 = new BrowserView()
  mainWindow.setBrowserView(view1)
  view1.setBounds({ x: 0, y: 0, width: 400, height: 600 })
  view1.setAutoResize({ width: true, height: true })

  const view2 = new BrowserView()
  mainWindow.setBrowserView(view2)
  view2.setBounds({ x: 400, y: 0, width: 400, height: 600 })
  view2.setAutoResize({ width: true, height: true })

  view1.webContents.loadURL('https://www.google.com')
  view2.webContents.loadURL('https://www.github.com')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', function () {
  createWindow()
})

In this example, we create a new BrowserWindow and set two BrowserView instances to display two different web pages. We set the bounds and auto-resize properties to position and size the views, and load the web pages using loadURL() method of each view's webContents object. Finally, we clean up the window object when the window is closed using the closed event listener.