ElectronJS: Uncaught TypeError: iprenderer . htmlOn不是一个函数.&l

Question

Using: Electron v15.2.0 Using 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代码转储到控制台，但它没有从renderer.js代码发射。我得到错误: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和ipcrederer的范围，我会，但问题是我无法让电子应用程序将消息发送回主窗口。

提前感谢!

Answer 1

我相信你已经看到了这个问题。在(启用了上下文隔离?)渲染器中，ipcRenderer没有on方法。

解决方案是将ipcRenderer.on逻辑移动到预加载脚本中，如下所示(完整的代码示例在这里):

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

然后你的渲染器可以做:

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

(记住这里提到的解决方案的内存泄漏)