Electron 中的多个 Windows

Question

I've been looking for hours, and I cant find a way to build a working setup to use multiple windows in my Electron app.

I'm using electron-forge with plain vanilla JS. No react or vue.

What I'm trying to achieve is popups that I can trigger from inside the main application Dashboard using functions.

Here's what I have for HTML:

<i onclick="newBot()" class="fas fa-plus new-bot-button bar-icon"></i>
<i onclick="selectBot()" class="fas fa-box-open select-bot-button bar-icon"></i>
<i onclick="startBot()" class="fas fa-play start-bot-button bar-icon"></i>
<i onclick="stopBot()" class="fas fa-stop stop-bot-button bar-icon"></i>
<i onclick="about()" class="fas fa-info about-button bar-icon"></i>

I'm completely clueless on how to implement this in JavaScript, so help would be greatly appreciated.

Note, I have a preload script mainPreload.js and the main script is main.js . The window is also frameless as well, and have a custom title bar that I coded. It looks like this. The icons referenced above are the set on the far right.

Here's my main.js :

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, 'mainPreload.js'),
      nodeIntegration: true,
      contextIsolation: false
    },
    frame: false,
    icon: './assets/toggle-01.png'
  })
  
  win.loadFile('index.html');
  ipcMain.on('minimize', () => {
    win.minimize()
  });
}



app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Here's my mainPreload.js :

function scrollDown() {
  document.getElementById('console-text').scrollTop = document.getElementById('console-text').scrollHeight
}

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('console-text');
  console.log = function(message) {
    const p = container.appendChild(document.createElement('p'));
    p.textContent = message;
    p.className = 'console-output';
    scrollDown();
  };
  window.addEventListener('error', (error) => {
    const p = container.appendChild(document.createElement('p'));
    p.textContent = error.message;
    p.className = 'console-output';
    scrollDown();
  });
  console.log('Ready')
})

Thanks!

Answer 1

To show new windows you just need to create new BrowserWindow instances. You can refer to ElectronJS samples on GitHub

Below is a code based on the Create Window demo.

Add an ID to your button (not the best idea to use <i> tag for this btw):

    <i id="id-about" class="fas fa-info about-button bar-icon"></i>

Then create a click event handler. Put this code into your renderer process (in your case a JS running in your index.html ).

const {BrowserWindow} = require('electron').remote
const path = require('path')

const newWindowBtn = document.getElementById('id-about')

newWindowBtn.addEventListener('click', (event) => {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/about.html')
  let win = new BrowserWindow({ width: 400, height: 320 })

  win.on('close', () => { win = null })
  win.loadURL(modalPath)
  win.show()
})

Hope this helps. You can find more info in the ElectronJS Docs ( BrowserWindow in particular)