Electron中Main进程向Renderer进程的消息无法通过contextBridge传递？

核心原因：消息发送时机早于渲染进程监听器绑定 #

你的代码中，loadData在窗口创建后立即执行，但此时渲染进程（renderer.js）可能还未完成脚本加载，导致通过contextBridge绑定的onDataListReady监听器还未注册，而Main进程已经发送了data:dataList消息。preload顶部的直接监听器能触发，是因为preload脚本在窗口初始化时就会执行，早于renderer.js的加载。

解决方案1：等待渲染进程DOM就绪后再发送数据 #

修改main.js中loadData的调用时机，确保窗口DOM完全加载后再发送数据：

// main.js
app.whenReady().then(()=>{
  createWindow()
  // 监听窗口DOM就绪事件，再执行数据加载与发送
  mainWindow.webContents.on('dom-ready', async () => {
    await loadData()
  })
  // 其他代码...
})

同时修正renderer.js中的变量错误（dataList应为回调参数value）：

// renderer.js
window.myAPI.onDataListReady((value) => {
  console.log(value)
  try {
    value.forEach(it=>console.log(it)) // 把dataList改为value
  } catch (error) {
    console.error('Error in onDataListReady:', error)
  }
})

解决方案2：让渲染进程主动请求数据（更可靠） #

改用ipcRenderer.invoke实现Renderer主动向Main请求数据，彻底避免时机问题：

1. 修改preload.js：添加主动请求的API

// preload.js
contextBridge.exposeInMainWorld('myAPI',
  {
    // 新增：主动请求数据方法
    fetchDataList: () => ipcRenderer.invoke('data:getDataList'),
    // 保留原监听方法（若需后续实时更新）
    onDataListReady: (callback) => ipcRenderer.on('data:dataList', (_event, value) => {
      console.log('监听到数据更新')
      callback(value)
    }),
    // 其他API...
  }
)

2. 修改main.js：添加IPC处理函数

// main.js
const { ipcMain } = require('electron')

// 处理渲染进程的数据请求
ipcMain.handle('data:getDataList', async () => {
  const configFilePath = path.join(app.getPath('userData'), 'List of Data Points.json')
  return await readJSON(configFilePath)
})

app.whenReady().then(()=>{
  createWindow()
  // 无需再主动调用loadData，由渲染进程触发
  // 其他代码...
})

3. 修改renderer.js：主动发起数据请求

// renderer.js
async function initData() {
  try {
    const dataList = await window.myAPI.fetchDataList()
    if (dataList.length) {
      console.log(dataList)
      dataList.forEach(it=>console.log(it))
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', initData)

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