Over at the forums there was a developer who needed to open a second app window from the main process when the user had done something in the renderer process. So I thought we could look at a real world example. So in this tutorial we’ll wait for the user to click a button. Then we’ll send a message to the main process which in turn opens a new window.
1. Setting up a new window in main.js
Fire up the Electron tutorial app or your own app, and open main.js. The additions are highlighted in bold.
We create a new variable to hold our second window with let secondWindow and by now you know how to create a new BrowserWindow. But this time the size of the window has changed. And we also don’t show a frame, so we set that to frame:false. This is because we close the window from a button that we create ourselves instead of using the standard os-buttons. If the user closes the new window with the built in close button they wont be able to open it again because it’s not initialized anymore.
We also set mainWindow as parent so that secondWindow will stay on top of the parent window. There are some platform specific handling to the parent setting:
On macOS the child windows will keep the relative position to parent window when parent window moves, while on Windows and Linux child windows will not move.
On Windows it is not supported to change parent window dynamically.
On Linux the type of modal windows will be changed to dialog.
On Linux many desktop environments do not support hiding a modal window
The secondWindow also loads another .html file called ipcwindow.html that is located in a folder called windows. Lets look at that next.
2. IPCWindow content
Create a new folder called windows. In that folder you create ipcwindow.html. Add this content to the html file:
3. Changes in navigation menu and who we are section
When this tutorial is being written the navigation menu and who we are section looks like this:
Navigation menu - who we are
Change the name of the menu-item to IPC/Remote in the en.js and sv.js translations
Also rename sections/whoweare.html to ipcremote.html. Then update link=rel and the sidebar menu in index.html:
In ipcremote.html we also need to update the id of the section to ipcremote and adding some information about what will happen if we click the button:
Now we’ve got our app set up and it’s finally time to move on to sending and receiving messages with IPC. This will be done asynchronous.
Create a file called ipc.js in assets/js/. To start with you can add this content to it:
init() is called on documentready. That in turn hooks up an onclick event on the button in the ipc section with id #open-secondwindow-button. Now to the ipc stuff. When that button is clicked ipcRenderer.send is invoked like this: ipcRenderer.send(‘open-second-window’, ‘an-argument’) The first value sent as a parameter is the name of the event. The second one is an argument of your own choice.
and add a require statement to the file in index.html:
Now it is time to listen for this event in main.js. Start by adding a require statement for ipcMain at the top of the file:
And to listen to the event and showing the second window just add this code:
And at this point the tutorial on ipc main and renderer is over. But we’ll do it once more just to be able to close the secondwindow again.
6. Closing a BrowserWindow
Open up ipc.js again and add another on click event that sends a closing message to main:
And in main we add another event listener:
Ipc also needs to be required from ipcwindow.html:
That’s it for this tutorial. Check out the official documentation on IPCMain and IPCRenderer