Electron中如何防止弹出多个dialog.showMessageBox对话框

嘿，我刚好处理过类似的Electron弹窗问题，其实核心就是加个状态控制，避免重复触发。给你两种实用的解决方案，你可以根据需求选：

这个方案最简单，就是用一个变量做“锁”，标记当前是否有弹窗正在显示。每次调用dialog.showMessageBox前先检查这个锁，只有没有弹窗时才触发，弹窗关闭后再释放锁。

主进程里的实现代码：

// 主进程中维护弹窗状态锁
let isMessageBoxActive = false;

async function showSingleMessageBox(window, options) {
  // 如果已有弹窗在显示，直接返回，不触发新的
  if (isMessageBoxActive) return;

  isMessageBoxActive = true;
  try {
    // 调用原生弹窗API
    await dialog.showMessageBox(window, options);
  } finally {
    // 不管用户点了确认还是取消，弹窗关闭后重置状态
    isMessageBoxActive = false;
  }
}

// 调用示例
showSingleMessageBox(mainWindow, {
  type: 'info',
  title: '提示',
  message: '同一时间只会显示这一个弹窗'
});

这个方法的好处是完全基于原生API实现，不需要额外的自定义窗口，适合只需要避免重复弹窗的场景。

注意：Electron原生的dialog.showMessageBox是系统级对话框，没有提供主动关闭的API，所以没办法直接强制关闭已弹出的原生弹窗。如果一定要实现“新弹窗替换旧弹窗”的效果，得改用自定义的BrowserWindow来做弹窗，这样就能完全控制弹窗的生命周期。

主进程里的自定义弹窗实现：

// 主进程中维护当前弹窗的实例
let activeCustomMessageBox = null;

function showReplaceableMessageBox(options) {
  // 如果已有自定义弹窗，先关闭它
  if (activeCustomMessageBox) {
    activeCustomMessageBox.close();
    activeCustomMessageBox = null;
  }

  // 创建自定义弹窗窗口
  activeCustomMessageBox = new BrowserWindow({
    width: 320,
    height: 180,
    modal: true, // 设置为模态弹窗，阻塞主窗口操作
    parent: mainWindow, // 绑定到主窗口
    show: false, // 先隐藏，加载完内容再显示
    frame: true, // 可以设置为false去掉默认窗口边框，自定义样式
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 用preload做渲染进程和主进程的通信，更安全
    }
  });

  // 加载弹窗内容（这里用内嵌HTML示例，也可以加载单独的HTML文件）
  activeCustomMessageBox.loadURL(`data:text/html;charset=utf-8,
    <!DOCTYPE html>
    <html>
    <body style="padding: 20px; text-align: center;">
      <h3>${options.title}</h3>
      <p style="margin: 20px 0;">${options.message}</p>
      <button onclick="window.electronAPI.closeMessageBox()" style="padding: 8px 16px;">确认</button>
    </body>
    </html>
  `);

  // 弹窗关闭时重置实例
  activeCustomMessageBox.on('closed', () => {
    activeCustomMessageBox = null;
  });

  // 内容加载完成后显示弹窗
  activeCustomMessageBox.once('ready-to-show', () => {
    activeCustomMessageBox.show();
  });
}

// 在preload.js里暴露关闭弹窗的方法（确保安全）
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  closeMessageBox: () => ipcRenderer.send('close-message-box')
});

// 主进程监听关闭弹窗的事件
ipcMain.on('close-message-box', () => {
  if (activeCustomMessageBox) {
    activeCustomMessageBox.close();
  }
});

// 调用示例
showReplaceableMessageBox({
  title: '新提示',
  message: '这个弹窗会替换之前的所有弹窗'
});

这个方案的好处是完全可控，可以自定义弹窗的样式、交互，甚至添加更多按钮或组件，适合需要更灵活弹窗的场景。

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