未调用一个渲染器进程/主窗口的多个 js 文件中的 ipcRenderer 侦听器

Posted 2023-03-22

【中文标题】未调用一个渲染器进程/主窗口的多个 js 文件中的 ipcRenderer 侦听器

【英文标题】：ipcRenderer listeners in multiple js files for one renderer process/main window not being called

【发布时间】：2020-06-20 21:24:14

【问题描述】：

使用纯 js 构建电子应用程序。我有一个带有单个 webContents 的 mainWindow（使用 webContents.getAllWebContents() 检查）。在主窗口中，我有两个不同的文件，一个是从一开始就加载的 (mainWindow.js)，另一个是动态加载的 (customerList.js)。

所以，我从主进程运行mainWindow.webContents.send('customer:display', customerObject);。然后在customerList.js我有

const customerElectron = require('electron');

customerElectron.ipcRenderer.on('customer:display', (e, customer) => 
  console.log('customer: ', customer);
;

这没有被调用。为了检查它是否被调用，我将其添加到我的mainWindow.js：

const mainElectron = require('electron');

mainElectron.ipcRenderer.on('customer:display', (e, customer) => 
  console.log(customer, 'customer');
;

这被调用并记录正确的客户对象。由于只有一个 webContents 我会假设 ipcRenderer 只是将事件添加到其中。另外，我通过将侦听器包装在console.log(JSON.stringify(customerElectron.ipcRenderer)) 中来检查是否添加了事件。在创建侦听器之前，它有 0 个事件，之后它有 1 个事件。所以添加监听的代码肯定是调用的。

由于js脚本属于动态加载的内容，目前需要在内容加载到DOM后加载，所以我不能只在我的mainWindow.js中添加监听器。这个问题有解决方案吗？总的来说，一个渲染器进程有多个 js 文件以及其中的多个电子需求是否有问题？

【参考方案1】：

我找到了解决问题的方法：

首先在mainWindow.js 中，我用 var 在全局范围内声明了电子：

var electron = require('electron');

这使它在其他脚本中可用。我还在脚本中添加了一个 onload 事件，以等待脚本被加载。在 mainWindow.js 中：

// loading dynamic content here
callback = _ =>  ipcRenderer.send('content:added', '') ;
// script contains the script node
script.onload = callback;

在 customerList.js 中：

electron.ipcRenderer.on('customer:display', customer => 
  console.log('Customer: ', customer);
);

然后在main.js中：

// customerObject is a defined customerObject
ipcMain.on('content:added', _ => 
  mainWindow.webContents.send('customer:display', customerObject);
;

这最终调用了customerList.js 中的事件，并在mainWindow 中记录了正确的客户对象。