如何使 HTML 按钮执行 Electron JS 功能答案

【问题标题】：How do I make an HTML Button perform an Electron JS Function如何使 HTML 按钮执行 Electron JS 功能
【发布时间】：2020-12-18 21:50:56
【问题描述】：

我正在制作一个电子应用程序，它只是一个 HTML 网站，我想尝试集成到应用程序中。如何让 id 为“createbutton”的标签在电子中执行 JS 函数，如 createprojectwindow()？

main.js：

//Launch Main Part of the Program
let mainWindow;
let createWindow;

app.on("ready", function() {
    console.log("Creating new Session");
    mainWindow = new BrowserWindow({
        "minWidth" : 800,
        "minHeight": 600
    });
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, './src/index.html'),
        protocol: "file:",
        slashes: true,
    }));

    console.log("Creating Menus");
    const mainMenu = Menu.buildFromTemplate(mienu);
    Menu.setApplicationMenu(mainMenu);
});
function createProjectWindow () {
    console.log("Creating New Project")
    
    createWindow = new BrowserWindow({
        width: 400, 
        height: 400,
    });
    createWindow.setMenu(null);
    createWindow.loadURL(url.format({
        pathname: path.join(__dirname, "./src/createproject.html"),
        protocol: "file:",
        slashes: true,
    }));


}

index.html:

        <nav>
            <ul>
                <li class="navlink" id="logo"><a><img id="logoimg" src="Assets/Images/smallInsert.png"></a></li>
                <li class="navlink greyhover" id="myproj"><a>My Projects</a></li>
                <li class="navlink greyhover" id="import"><a>Import</a></li>
                <li class="navlink greyhover" id="test"><a>Test Site</a></li>
                <li class="navlink greyhover" id="create"><a id="createbutton">Create New Project</a></li>
            </ul>
        </nav>

【问题讨论】：

标签： javascript html electron

【解决方案1】：

要从 index.html 与 main.js 交互，你需要 ipcmain 和 ipcrenderer

在 main.js 中

const {ipcMain} = require('electron');
ipcMain.on('ABCD', (event, arg) => {/* do something */});

在 index.html 脚本中

const { ipcRenderer } = require('electron');
let data = /*some data*/;
whenSomethingHappens => {ipcRenderer.send('ABCD', data);}

这些来源可能会有所帮助： https://ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-framework

https://www.electronjs.org/docs/tutorial/application-architecture

【讨论】：

【解决方案2】：

为了在主进程和渲染器进程之间进行通信。您需要使用 IPC API。

你可以这样接近你的目标。

main.js

    const {ipcMain} = require('electron');

    ... 

    mainWindow = new BrowserWindow({
        "minWidth" : 800,
        "minHeight": 600,
        "webPreferences": {
             "nodeIntegration": true; // Should be set to use any NodeAPI on renderer process
        }
    });
    ...
    ipcMain.on('create-project-window', (_) => { createProjectWindow()});

index.html

<script>
     function onClickSth() {
          const {ipcRenderer} = require('electron');
          ipcRenderer.send('create-project-window');
     }     
</script>

【讨论】：