如何从 index.html 调用 index.js function

Question

所以我正在制作一个 electron 应用程序，但我不知道如何在 index.html 的 main.js 文件中调用 function。 我找了好几个小时，甚至问了朋友，但没有人知道答案。

所以要么它很简单，没有人费心把它写下来，要么我在做一些根本错误的事情。

Answer 1

在渲染器上使用 ipcMain

ipcMain 模块是一个事件发射器。 在主进程中使用时，它处理从渲染器进程（网页）发送的异步和同步消息。 从渲染器发送的消息将被发送到此模块。 https://www.electronjs.org/docs/latest/api/ipc-main/

例如： https://www.electronjs.org/docs/latest/tutorial/dark-mode

Answer 2

通过了解 Electron 中的“进程模型”，您将会受益匪浅——就像后者所基于的 Chromium 一样，它使用一个进程来加载和执行“main.js”脚本，而另一个进程可能会加载一个HTML 文档（“index.html”）以及间接的 Web 页面脚本（“index.js”）。 前者传统上称为“主进程”，后者称为“渲染器进程”。 如果您的主进程加载多个 HTML 文档，您可能有多个渲染器进程，但 Electron 应用程序只有一个主进程。

您具体想要的是通过Electron 中所谓的进程间通信来完成。

作为此 model 实现的一部分，实际上，要调用“index.js”中可用的 function，您需要将消息从主进程发送到“renderer”进程（如果您阅读并了解过程 model，您会知道这是加载“index.html”的过程）。

该消息是通过在WebContents class 的 object 上调用send方法发送的，我假设您的 Electron 应用程序创建为它的主进程的一部分，其中const win = new BrowserWindow(...) win object 上的contents属性，下面别名为“contents”：

contents.send("foo", "bar");

以上将在通道“foo”上发送消息“bar”，但要接收并处理消息（在您的情况下，可能会调用您选择的一些 function），您需要在“渲染器”过程，例如您的index.js包括以下内容（这将破坏 Web 浏览器，因为后者通常至少require function）：

require("electron").ipcRenderer.on("foo", message => {
    console.debug(message); /// This will dump "bar" on the Web console
});

由于上述代码在“渲染器”进程中运行，您可以让侦听器 ( message =>... ) 调用那里可用的任何 function。

无论如何，这是惯用的方法。