如何从 index.html 调用 index.js 函数

分享于2022年11月15日 electron javascript 问答
【问题标题】:how to call an index.js function from index.html如何从 index.html 调用 index.js 函数
【发布时间】:2022-08-18 16:20:11
【问题描述】:

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

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


【解决方案1】:

了解 the "process model" in Electron 将为您服务。

就像后者所基于的 Chromium 一样,Electron 使用一个加载“main.js”脚本的进程,称为 主要流程 ,以及另一个加载 HTML 文档(“index.html”)的进程,该文档又可以加载网页脚本(“index.js”),称为 渲染器进程 .

如果您的主进程加载多个 HTML 文档,您可能有 渲染器进程,但 Electron 应用程序只有一个主进程。

要在“index.js”中有一个可用的函数,从主进程一直调用,你需要 send a message from the main process to the "renderer" process ,并在后者中接收它。

消息是通过在 WebContents 类的对象上调用 send 方法发送的,我假设您的Electron 应用程序使用 const win = new BrowserWindow(...) 创建作为其主进程的一部分,其中所述“内容”可通过 contents 获得 win 对象上的属性,下面别名为“内容”:

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

以上将在频道“foo”上发送消息“bar”。要接收并处理消息(在您的情况下调用您选择的某些函数),您需要在“渲染器”过程中为消息设置一个侦听器,例如您的 index.js 包括以下内容:

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

由于上述代码在“renderer”进程中运行,您可以让侦听器 ( message => ... ) 调用 [对“index.js”] 可用的任何函数。

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

【讨论】: