Calling a function of main process

Question

I am trying to call a function of main process from another Javascript file while a button is clicked. The code is given below:

main.js

const electron = require( 'electron')
const {app, BrowserWindow} = electron
const path = require('path')

app.on('ready', () => {
let win = new BrowserWindow({width:800,height:600})
win.loadURL(`file://${__dirname}/index.html`)
})

exports.openWindow = () => {
alert("Hello Javatpoint");
}

index.html

<!doc html>
<html>
<head>
<title>
Test 1
</title>
</head>

<body>
<h1>Hello world</h1>
<script src="index.js"></script>
</body>
</html>

index.js

const main = require('electron').remote.require('./main')


var button = document.createElement('button')
button.textContent = 'Open'
button.addEventListener('click',() => {
main.openWindow()
}, false)
document.body.appendChild(button)

When I click the button it should show an alert dialog. But its not showing anything. I am new in electron. I want to know the reason why its not working. Please help.

When I click the button it should show an alert dialog. But its not showing anything — Rifat Ara Tasnim, Aug 13 '17 at 10:59
But why from the main.js file? The code inside the main process shouldn't do anything related with the renderer process, so you could simply create another JS file with your function and then require it in your index.js file. Alternatively if you "know" what you're doing and really need to execute JS from the main process, then check this question: https://stackoverflow.com/questions/28920621/how-to-call-a-javascript-function-on-a-web-page-rendered-by-electron — Carlos Delgado, Aug 13 '17 at 11:11
Sorry, my question mislead you. I have edited it. I have alternate solution. But I want to know the reason why its not working. — Rifat Ara Tasnim, Aug 13 '17 at 11:19

Carlos Delgado · Answer 1 · 2017-08-14T09:28:01.407

The code is valid and the function gets exported, the only error is that inside the main process, the alert function doesn't exist. You can only take a look to the console and you should see the error:

The alert function isn't available in the main process (main.js) as this is not the renderer process. You can change the alert with a console.log and that should work:

exports.openWindow = () => {
    // You should see this data on the console that
    // starts electron, not in the JavaScript console of electron !
    console.log("Hello Javatpoint");
};

From this process you have not direct access to the DOM functions. As mentioned, to see graphical results, you can execute a console.log to see the string on the console that started the Electron Application:

Correct way to proceed

If you want to follow standards though, you may use the ipcMain and ipcRenderer of electron:

main.js

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

ipcMain.on('open-window', (event, arg) => {
// prints "ping"
console.log(arg);

event.sender.send('open-window-response', 'pong');
})

index.js

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

ipcRenderer.on('open-window-response', (event, arg) => {
    // prints "pong" in the JS console (chromium)
    console.log(arg);
});

var button = document.createElement('button');

button.textContent = 'Open';

button.addEventListener('click',() => {

     ipcRenderer.send('open-window', 'ping');

}, false);  

document.body.appendChild(button)

I am using Atom as editor and command prompt to run the code. It was not showing any error. Can you tell me where and how to see these errors? This question may look silly. But I am in really in trouble to understand these things. Thanks in advance — Rifat Ara Tasnim, Aug 16 '17 at 07:36
@RifatAraTasnim well, with the providen code you shouldn't see any error. You can run the example code to analyze how it works by yourself. You can read this article for further help: http://ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-framework — Carlos Delgado, Aug 16 '17 at 08:20

Calling a function of main process

1 Answers1

Correct way to proceed