Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
872 views
in Technique[技术] by (71.8m points)

node.js - How do I get a Electron app object through HTML (script tag)?

So I have here this:

<!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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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.

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.

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.

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,
    }
}

Now in a new file called preload.js:

window.ipcRenderer = require('electron').ipcRenderer;

In your snippet you added const { app } ... which should be done this way to inject the javascript using a preload property in the object.

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
});

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>

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...