Electron主/预加载/渲染进程架构下调用ipcRenderer.on报非函数错误

• ipcRenderer.on 从未在Electron新版本中被移除，属于官方长期保留的标准API
• 渲染进程中该方法丢失的根本原因，是Electron默认开启的上下文隔离机制，与直接透传整个ipcRenderer对象的写法不兼容

你在preload中直接把整个ipcRenderer实例传给contextBridge.exposeInMainWorld时，contextBridge会对传递的内容做严格的跨上下文转换，并不会把原始对象直接挂载到渲染进程的window上：

• contextBridge仅会保留对象实例自身的可枚举属性，不会拷贝对象原型链上挂载的继承方法
• ipcRenderer本身继承自Node.js的EventEmitter实现，on、off、once这类事件监听方法是挂载在原型链上的，并非实例自身的可枚举属性，因此在跨上下文传递时会被直接剥离
• 你在渲染进程调试时看到的__proto__: Object输出可以直接佐证这一点：原始ipcRenderer的原型链原本会挂载所有事件监听方法，经过contextBridge转换后，原型链被替换为普通空对象，原型链上的方法自然全部丢失，最终只剩几个直接挂在实例上的可枚举方法（send、invoke、sendSync等）

这个转换规则是Electron出于安全设计的强制约束，并非API缺陷，核心目的是防止不受信任的渲染进程直接拿到完整的高权限IPC接口。

不要直接透传整个ipcRenderer对象，需要在preload中显式包装你需要使用的方法，再通过contextBridge暴露给渲染进程：

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 手动包装事件监听方法，逻辑保留在preload的可信上下文中
  on: (channel, callback) => {
    // 可在这里增加通道名校验，避免渲染进程随意监听敏感通道
    ipcRenderer.on(channel, (event, ...args) => callback(...args))
  },
  // 按需暴露其他需要的IPC方法
  send: (channel, data) => ipcRenderer.send(channel, data),
  invoke: (channel, data) => ipcRenderer.invoke(channel, data),
  // 如需取消监听能力，可同步暴露对应方法
  removeAllListeners: (channel) => {
    ipcRenderer.removeAllListeners(channel)
  }
})

渲染进程中直接调用window.electronAPI.on(...)即可正常使用，不会再出现方法不存在的报错。

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