Electron中实现点击按钮在资源管理器打开文件夹的方法

你遇到的问题核心是Electron主进程和渲染进程完全隔离——渲染进程（HTML页面）无法直接调用主进程里定义的函数，哪怕你在default.main.js里写了openDocuments，渲染进程也访问不到这个函数。下面是标准的实现方案：

步骤1：修改主进程代码（default.main.js） #

用IPC（进程间通信）监听渲染进程的请求，处理打开文件夹的逻辑：

const { app, BrowserWindow, shell, ipcMain } = require('electron');
const path = require('node:path');
const documentsPath = 'E:/';

// 监听渲染进程发来的打开文件夹请求
ipcMain.handle('open-documents-folder', async () => {
  await shell.openPath(documentsPath);
});

// 创建窗口的核心逻辑
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 指定预加载脚本，作为进程间的安全桥梁
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('default.html');
}

// 应用生命周期处理
app.whenReady().then(() => {
  createWindow();

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

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

步骤2：创建预加载脚本（preload.js） #

这个脚本是连接主进程和渲染进程的安全桥梁，只暴露需要的API：

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程暴露可控的API
contextBridge.exposeInMainWorld('electronAPI', {
  openDocuments: () => ipcRenderer.invoke('open-documents-folder')
});

步骤3：修改HTML按钮的点击事件 #

调用预加载脚本暴露的API，替代原来直接调用主进程函数的写法：

<button name="SystemMenu-Button" id="SystemMenu-Button" class="SystemMenu-Button" onclick="electronAPI.openDocuments()">
    Documents
    <i name="SystemMenu-ButtonIcon" id="SystemMenu-ButtonIcon" class="fa-solid fa-folder-open fa-fw"></i>
</button>

为什么要这么做？ #

• 预加载脚本拥有Node.js环境权限，但通过contextBridge暴露的API是安全可控的，避免渲染进程直接访问Electron核心模块带来的风险。
• IPC是Electron进程间通信的标准方式，ipcMain.handle和ipcRenderer.invoke实现了异步的函数调用逻辑，保证进程间通信的稳定性。

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