Electron应用：调用ipcRenderer.send()后如何向渲染进程回传数据？

当nodeIntegration=false且contextIsolation=true时，渲染进程无法直接通过require('electron')获取ipcRenderer，必须通过**预加载脚本（preload script）**结合contextBridge来安全暴露IPC通信能力，具体实现步骤如下：

1. 主进程配置预加载脚本 #

创建BrowserWindow时指定预加载脚本路径，同时保持安全配置：

// 主进程 main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  });

  mainWindow.loadFile('index.html');

  // 主进程监听渲染进程请求，处理后回传数据
  ipcMain.on('request-data', (event, args) => {
    // 模拟业务数据处理
    const processedData = {
      status: 'success',
      request: args,
      result: '处理完成的返回内容'
    };
    // 通过event.sender向发起请求的渲染进程回传数据
    event.sender.send('response-data', processedData);
  });
}

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. 编写预加载脚本 #

预加载脚本运行在隔离上下文，可安全访问Electron API，通过contextBridge将必要的IPC方法暴露给渲染进程：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 仅暴露业务所需的IPC方法，避免直接暴露整个ipcRenderer带来的安全风险
contextBridge.exposeInMainWorld('electronAPI', {
  // 向主进程发送请求
  sendRequest: (data) => ipcRenderer.send('request-data', data),
  // 监听主进程的回传数据
  listenResponse: (callback) => {
    ipcRenderer.on('response-data', (_, data) => callback(data));
  },
  // 可选：一次性监听（避免重复绑定）
  listenResponseOnce: (callback) => {
    ipcRenderer.once('response-data', (_, data) => callback(data));
  }
});

3. 渲染进程调用暴露的API #

渲染进程无需require，直接通过window.electronAPI使用通信能力：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
  <button id="sendBtn">发送请求</button>
  <div id="result"></div>

  <script>
    const sendBtn = document.getElementById('sendBtn');
    const resultDiv = document.getElementById('result');

    // 提前监听主进程回传
    window.electronAPI.listenResponse((data) => {
      resultDiv.textContent = `收到回传：${JSON.stringify(data)}`;
    });

    // 点击按钮发送请求
    sendBtn.addEventListener('click', () => {
      window.electronAPI.sendRequest({ userInput: '测试请求参数' });
    });
  </script>
</body>
</html>

核心注意点 #

• 仅暴露业务必需的IPC方法，不要直接暴露ipcRenderer实例，防止恶意代码利用未授权的IPC通道。
• 若只需接收一次回传，优先使用listenResponseOnce，避免重复绑定事件导致内存泄漏。
• 预加载脚本仅作为通信桥梁，不要在其中处理敏感业务逻辑，所有核心逻辑应放在主进程中。

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