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

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

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

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

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

请注意，它应该位于我的电子代码中

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

我已经检查了如何使用

remote

模块调用electron内部的函数/模块。但我没有找到一种方法来调用我在电子代码库中编写的函数

顺便说一句：

---

我可以启用

节点集成

选项。

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

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

// 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.另一种方法是在主进程和渲染器进程之间发送/接收事件：

// 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'

---

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

一,

二,

---

@nem035感谢您指出了模棱两可的描述。这是您提到的第二个案例。2021年选项2的答案仍然有效：）

// 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();
  });

// 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');
  });