Electron：如何动态创建窗口？能否用单一函数创建可识别窗口？

这个问题我之前做Electron项目时也碰到过，核心原因就是你用了单个变量newWindow来存储每次创建的窗口实例——每次新窗口创建都会覆盖掉之前的引用，所以最后newWindow只会指向最后一个创建的窗口，调用focus()自然只会作用在它上面。

下面给你一套完整的解决方案，既能用单一函数创建窗口，又能精准识别并操作每个窗口：

1. 核心思路 #

• 用数组存储所有窗口实例，避免单个变量覆盖引用
• 给每个窗口添加唯一标识（比如自定义ID），方便后续查找
• 封装窗口查找函数，快速定位目标窗口
• 处理窗口关闭事件，及时从数组移除实例，防止内存泄漏

2. 代码实现 #

第一步：定义全局窗口存储数组 #

首先在主进程文件（比如main.js）里定义一个数组，用来保存所有窗口的实例和标识：

const { BrowserWindow } = require('electron');
// 存储所有窗口，直接给窗口对象挂载自定义标识属性
let allWindows = [];

第二步：封装统一的窗口创建函数 #

这个函数接收唯一ID和可选的窗口配置，创建窗口后自动存入数组：

function createWindow(windowId, customOptions = {}) {
  // 合并默认配置和自定义配置
  const windowOptions = {
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    ...customOptions
  };

  // 创建新窗口
  const newWindow = new BrowserWindow(windowOptions);

  // 给窗口添加唯一ID标识（直接挂载到窗口对象上）
  newWindow.uniqueId = windowId;

  // 将窗口实例存入数组
  allWindows.push(newWindow);

  // 窗口关闭时，从数组中移除，避免内存泄漏
  newWindow.on('closed', () => {
    allWindows = allWindows.filter(win => win.uniqueId !== windowId);
  });

  // 加载页面（根据你的需求修改路径）
  newWindow.loadFile('index.html');

  return newWindow;
}

第三步：封装窗口查找函数 #

通过唯一ID快速找到目标窗口：

function getWindowById(windowId) {
  return allWindows.find(win => win.uniqueId === windowId);
}

第四步：使用示例 #

现在你可以轻松创建多个窗口，并精准操作任意一个：

// 创建第一个窗口，ID设为"main-editor"
createWindow("main-editor", { width: 1000 });
// 创建第二个窗口，ID设为"preview-panel"
createWindow("preview-panel", { height: 700 });

// 聚焦第一个窗口
const editorWindow = getWindowById("main-editor");
if (editorWindow) {
  editorWindow.focus();
}

// 最小化第二个窗口
const previewWindow = getWindowById("preview-panel");
if (previewWindow) {
  previewWindow.minimize();
}

3. 额外优化建议 #

• 如果不想手动指定ID，可以用uuid库自动生成唯一标识，避免重复
• 可以给窗口添加更多自定义属性，比如windowType: "editor"、windowType: "preview"，方便按类型批量操作
• 对于渲染进程触发的窗口操作，可以通过IPC通信传递窗口ID，主进程再根据ID找到对应窗口执行操作

内容的提问来源于stack exchange，提问作者Sir Rubberduck