Electron 中的多个窗口答案

【问题标题】：Multiple Windows in ElectronElectron 中的多个窗口
【发布时间】：2021-06-30 23:59:10
【问题描述】：

我一直在寻找几个小时，但我找不到一种方法来构建工作设置以在我的 Electron 应用程序中使用多个窗口。

我将electron-forge 与普通的 JS 一起使用。没有 react 或 vue。

我想要实现的是可以使用函数从主应用程序仪表板内部触发的弹出窗口。

这是我对 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>

我完全不知道如何在 JavaScript 中实现这一点，因此我们将不胜感激。

注意，我有一个预加载脚本mainPreload.js，主脚本是main.js。该窗口也是无框的，并且有一个我编写的自定义标题栏。它看起来像这样。上面引用的图标是最右边的集合。

这是我的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()
  }
})

这是我的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')
})

谢谢！

【问题讨论】：

当您说“弹出窗口”时，您到底是什么意思？新的BrowserWindows，基于 HTML 的模式，...？

标签： javascript html electron

【解决方案1】：

要显示新窗口，您只需创建新的 BrowserWindow 实例。可以参考ElectronJS samples on GitHub

以下是基于创建窗口演示的代码。

为您的按钮添加一个 ID（使用 <i> 标记并不是最好的办法）：

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

然后创建一个点击事件处理程序。将此代码放入您的渲染器进程（在您的情况下，一个 JS 在您的 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()
})

希望这会有所帮助。您可以在ElectronJS Docs（尤其是BrowserWindow）中找到更多信息

【讨论】：