如何从我的网页调用 Electron 中的函数/模块？

Question

我将尝试用简短的段落描述一个最小化的问题。

简而言之，我想在我的电子应用程序中使用一些逻辑或调用我的电子应用程序中的一些函数，该网页在我的电子应用程序中（我实际上正在为我的网页包装一个电子应用程序“外壳” )。

假设我想在我的 Electron 应用程序中公开一个函数。说，

function printNumbers () {
  console.log(1)
}

注意它应该位于我的 Electron 代码中。

然后在运行我的应用程序后，我想从我的网页调用此函数（单击从网站加载的网页中的按钮，然后在我的 Electron 应用程序中打开一个新窗口）。现在，我想我可以使用开发人员控制台检查 printNumber 是否有效。

我已经检查了如何使用remote 模块来调用电子内部的函数/模块。但是我没有找到一种方法来调用我在电子代码库中编写的函数。

顺便说一句： 我可以启用nodeIntegration 选项。

Answer 1

渲染器进程和主进程之间的通信主要有两种方式。

1. 一种方法是使用remote 模块来请求您要从主进程中获取的代码。该对象将包含您从主流程代码中导出的任何内容。

// main process, for example app/main.js
exports.test = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

mainProcess.test(); // 'Yay'

2. 另一种方法是使用Inter Process Communication 在主进程和渲染器进程之间发送/接收事件：

// main process, for example app/main.js
myWindow.webContents.send('my-cool-log-event', 'Yay');

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.on('my-cool-log-event', (evt, msg) => console.log(msg)); // 'Yay'

---

如果您想在渲染器进程中触发点击事件时从主进程调用函数，您可以使用任一方法。

1.

// main process, for example app/main.js
exports.onClick = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    mainProcess.onClick();
  });

2.

// main process, for example app/main.js
const { ipcMain } = require('electron')
ipcMain.on('click', () => console.log('do something'));

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    ipcRenderer.send('click');
  });