[英]How do I make an HTML Button perform an Electron JS Function
I'm making an electron application, which is simply a HTML Website that I wanted to try and integrate into an application.我正在制作一个电子应用程序,它只是一个 HTML 网站,我想尝试将其集成到应用程序中。 What would it take to make the tag with id "createbutton" perform a JS Function in electron, like createprojectwindow()?使 id 为“createbutton”的标签在电子中执行 JS 函数需要什么,比如 createprojectwindow()?
main.js:主要.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:索引.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>
To interact with main.js from index.html, you need ipcmain and ipcrenderer要从 index.html 与 main.js 交互,您需要 ipcmain 和 ipcenderer
In main.js在 main.js 中
const {ipcMain} = require('electron');
ipcMain.on('ABCD', (event, arg) => {/* do something */});
In an index.html script在 index.html 脚本中
const { ipcRenderer } = require('electron');
let data = /*some data*/;
whenSomethingHappens => {ipcRenderer.send('ABCD', data);}
these sources may help further: https://ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-framework这些来源可能会有所帮助: https : //ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-框架
https://www.electronjs.org/docs/tutorial/application-architecture https://www.electronjs.org/docs/tutorial/application-architecture
In order to communicate between main and renderer process.为了在主进程和渲染进程之间进行通信。 You need to use IPC API.您需要使用 IPC API。
You can approach your goal like this.你可以像这样接近你的目标。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.