Question

如何使用mainWindow的多个实例创建可运行的电子应用程序？这是一个非常简单的应用程序，其中的mainWindow只有两个按钮。一种创建新的mainWindow实例，另一种关闭当前窗口。

// main.js
const { app, ipcMain, BrowserWindow } = require('electron')

let mainWindow;

function main () {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 400,
    tabbingIdentifier: 'todoTab',
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('renderer/index.html');
  mainWindow.once('ready-to-show', () => {
    mainWindow.setTitle("Todo-" + mainWindow.id)
    mainWindow.show();
  })
  mainWindow.mergeAllWindows();
}

app.on('ready', main);

ipcMain.on('newListWindow', main);

ipcMain.on('closeWindow', function(event){
  mainWindow.close();
});

在上面的文件中，我将mainWindow设置为全局变量。
如果打开多个窗口，则添加tabbingIdentifier属性并链接mergeAllWindows（）方法将自动在显示中创建多个选项卡。
Electron为每个mainWindow实例分配一个ID。如果仅打开一个实例，则id为1。为简单起见，我将mainWindow标题设置为“ Todo-” + mainWindow.id（因此，第一个窗口是Todo-1，第二个窗口是Todo-2）。 / li>
单击newListWindow按钮时，将调用“ main”函数来创建mainWindow的新实例。
按下closeWindow按钮时，将关闭mainWindow实例。

带有两个按钮的HTML文件（缩写为body元素）

// renderer/index.html
<body>
  <h1 class="text-center">Todo List</h1>
  <button id="new-list-btn">New Todo List</button>
  <button id="close-btn">Close List</button>
  <script src="./index.js"></script>
</body>

ipcRenderer。侦听按钮的单击，并将消息发送到main.js。

// renderer/index.js
const { ipcRenderer } = require('electron')

document.getElementById('new-list-btn').addEventListener('click', () => {
  ipcRenderer.send('newListWindow');
});

document.getElementById('close-btn').addEventListener('click', () => {
  ipcRenderer.send('closeWindow');
});

上面的代码将创建多个Todo窗口，并将它们显示在不同的选项卡上。显示每个列表标题（Todo-1，Todo-2等）。问题是，最后一个打开的是唯一活动的。因此，如果我打开三个待办事项，然后转到其中任何一个并单击“关闭”按钮，则无论我在哪个窗口中，都将关闭第三个窗口。如果我尝试关闭它们，则另外两个将抛出错误。该物体被摧毁。有道理。因此，如果我位于哪个实例选项卡是我关闭的那个实例标签，那么我该如何编码。当我关闭它时，我所在的下一个选项卡将成为有效的mainWindow对象？

Answer 1

您可能只想处理'closeWindow'回调中的 focused BrowserWindow

使用BrowserWindow.getFocusedWindow静态方法

ipcMain.on('closeWindow', function(event) {
  const current = BrowserWindow.getFocusedWindow()
  if (current) current.close()
})

Answer 2

Pergy的答案可以按要求工作，但是我也将发布此答案，因为这是我实际使用的答案，而且我找不到其他有关如何执行此操作的文档。差别很小，但这似乎更直接：

ipcMain.on('closeWindow', function(event) {
  mainWindow = BrowserWindow.getFocusedWindow();
  mainWindow.close();
})

如何在Electron App中访问mainWindow的多个实例？

2 个答案: