如何通过 HTML(脚本标签)获取 Electron 应用程序对象? [英] How do I get a Electron app object through HTML (script tag)?
问题描述
所以我在这里:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh no!</title>
</head>
<body>
<label>Oh dear. A serious error occurred and the app needs to restart. Press the button below to restart.</label>
<br>
<button onclick="restart()">Restart</button>
<script>
const { app } = require("electron")
function restart() {
app.relaunch()
app.exit()
}
</script>
</body>
</html>
现在，当应用收到未处理的错误时，这将显示...但是当用户单击按钮时，应用不会重新启动，那么我该如何让应用重新启动?
And now, when the app receives an unhandled error this will show... but when the user clicks the button, the app doesn't restart so how would I make the app restart?
推荐答案
不使用preload.js无法获取app对象，也不能直接获取app 对象安全.有一种方法可以使用纯 Electon API 的 preload.js 和 ipcRenderer
You can't get the app object without using preload.js and neither is directly getting the app object safe. There is a method to do the above using preload.js and ipcRenderer which are pure Electon APIs
在电子中(甚至在 Web 开发中)，有服务器端代码和浏览器端代码.代码段中脚本标记之间编写的代码是服务器端代码，将无法在浏览器端执行.
In electron (even in web development), there is server-side code and browser-side code. The code written in between the script tags in your snippet is server side code which will fail to execute in browser side.
在您的情况下，服务器端代码位于 NodeJS 后端，而浏览器端代码是 HTML 页面及其自己的 javascript.
Server-side code in your case is in NodeJS Backend and browser-side code is the one which is the HTML Page and its own javascript.
所以要关闭窗口(只有 NodeJS 可以做到，即后端)，您需要使用 Electron 的 ipcRenderer 有助于浏览器端 javascript 和服务器端 javascript 之间基于字符串的通信.
So to close the window (which only NodeJS can do, i.e., the backend) you need to use Electron's ipcRenderer which helps string based communication between the browser-side javascript and the server-side javascript.
而 使用 new BrowserWindow 在电子中创建浏览器窗口(options) 其中 options 是一个对象.将对象定义为:
While creating a browser window in electron using new BrowserWindow(options) where options is an object. Define the object as:
options = {
webPreferences: {
preload: preload.js, //You need to create a file named preload.js (or any name) in your code
nodeIntegration: true,
contextIsolation: false,
}
}
现在在一个名为 preload.js 的新文件中:
Now in a new file called preload.js:
window.ipcRenderer = require('electron').ipcRenderer;
在您的代码段中，您添加了 const { app } ... 应该这样做以使用对象中的 preload 属性注入 javascript.
In your snippet you added const { app } ... which should be done this way to inject the javascript using a preload property in the object.
现在在您创建浏览器窗口的主 app.js 文件中(无论您命名为 index.js):
Now in the main app.js file (whatever you named maybe index.js) where you created the browser window:
const ipc = require('electron').ipcMain; //Add to your pre-existing code
ipc.on("close-app", (event, message) => { //"close-app" can be anything but, you need to use the same key in the send message side (later in this answer)
browserWindow.close(); //If you named the browserwindow as browserWindow
});
现在在您的 HTML 中(即发送消息端)
Now in your HTML (i.e., send message side)
...
<script>
window.ipcRenderer("close-app", ""); //Second parameter is used if you want to send some extra message. The extra message can be viewed in the server side from the message parameter in the app.js code (just above this paragraph)
</script>
如果您是第一次这样做，这有点困难.我添加了更多文章，可以帮助您消除困惑:
强调服务器端和浏览器端代码
NodeJS中与socket.io通信的关系
This is a bit difficult if you are doing it for the first time.
I've added more articles which will help you clear your confusions:
Highlight about server-side and browser-side code
Relation with socket.io communication in NodeJS
这篇关于如何通过 HTML(脚本标签)获取 Electron 应用程序对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
