如何從 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。

無論如何，這是慣用的方法。