Electron IPC主进程webContents无法向渲染进程发送数据

核心排查方向与修复步骤 #

1. 确认发送时机：必须等待渲染进程加载完成

主进程如果在窗口未加载完成时发送数据，渲染进程还没注册监听，会直接错过消息。确保在did-finish-load事件触发后再发送：

// 主进程代码
mainWindow.webContents.on('did-finish-load', async () => {
  const jsonData = await fs.readFile('./data.json', 'utf8').then(JSON.parse);
  mainWindow.webContents.send('json-data', jsonData); // 通道名需精准匹配
});

2. 检查Preload脚本的IPC暴露逻辑

必须通过contextBridge安全暴露监听方法，不能直接暴露ipcRenderer：

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

contextBridge.exposeInMainWorld('electronAPI', {
  onJsonData: (callback) => ipcRenderer.on('json-data', (_, data) => callback(data))
});

3. 渲染进程监听时机与代码正确性

确保在DOM加载完成后注册监听，同时验证electronAPI是否存在：

<!-- 渲染进程index.html -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  if (!window.electronAPI) {
    console.error('electronAPI未正确暴露');
    return;
  }
  window.electronAPI.onJsonData((data) => {
    console.log('收到数据:', data);
    // 数据处理逻辑
  });
});
</script>

4. 关键验证点

• 通道名称完全匹配：主进程send的第一个参数和渲染进程监听的通道名，大小写、拼写必须完全一致
• Preload路径正确：用path.join(__dirname, 'preload.js')生成绝对路径，避免相对路径导致脚本未加载
• 查看控制台日志：打开渲染进程开发者工具（Ctrl+Shift+I），检查是否有electronAPI未定义、通道名错误等报错
• 数据序列化正常：确保JSON文件无语法错误，主进程读取后能正常解析为对象（可在主进程打印jsonData验证）

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