ElectronJS: Uncaught TypeError: ipcRenderer.on is not a function

Question

使用：Electron v15.2.0 使用 Electron Quick Start

我知道这是一个非常简单的问题，但我似乎找不到解决方案。这是代码。

main.js:

// Get Tasks
ipcMain.on('json:get', (event, dataset) => {

  // Read the JSON file
  fs.readFile('./data/data.json', 'utf8', (err, jsonString) => {

    // Throw error to console if there is one
    if (err) {
      console.log("File read failed:", err)
      return
    }

    console.log(`JSON Data: ${jsonString}`)

    // Send returned JSON data to mainWindow
    mainWindow.webContents.send('tasks.return', jsonString)

  })
})

preload.js:

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

renderer.js

document.getElementById('test').addEventListener('click', () => {
    ipcRenderer.send('json:get', 'tasks')
})

ipcRenderer.on('tasks.return', (event, json) => {
    console.log(json)
})

发生的事情是事件侦听器正确触发，我知道因为 JSON 将从 main.js 代码转储到控制台，但它不会从 [=16= 触发] 代码。我收到错误：Uncaught TypeError: ipcRenderer.on is not a function，但正在调用：

ipcRenderer.on('tasks.return', (event, json) => {
    console.log(json)
})

但是，它不会在事件侦听器触发时被调用。

我尝试添加：

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

至 renderer.js，但随后出现此错误：Uncaught SyntaxError: Identifier 'ipcRenderer' has already been declared 并且均无效。

我知道我需要缩短 preload.js 文件中 contextBridge 和 ipcRenderer 的范围，我会的，但问题是我无法让 Electron 应用程序将消息发送回主窗口。

提前致谢！

Answer 1

我相信你看到了 this issue。 ipcRenderer 在（启用上下文隔离？）渲染器中时没有 on 方法。

解决方案是像这样在预加载脚本中移动 ipcRenderer.on 逻辑（完整代码示例 here）：

contextBridge.exposeInMainWorld("api", {
    onResponse: (fn) => {
        ipcRenderer.on("tasks.return", (event, ...args) => fn(...args));
    }
});

然后你的渲染器可以做：

window.api.onResponse((json) => console.log(json));

（记住内存泄漏，解决办法here）

ElectronJS: Uncaught TypeError: ipcRenderer.on is not a function

ElectronJS: Uncaught TypeError: ipcRenderer.on is not a function

javascript

electron