Control 2nd window with buttons in 1st window?



I’m working on an app which works with 2 windows - like e.g. PowerPoint in Presentation Mode -
so if you click on a button on the mainWindow you change the content of the secondWindow.

I have the following code in the html-files:


<button type="button" name="btn">Change text</button>


<h1 id="heading">Text1</h1>

How can I change the #headings content to Text2 by pressing #btn?

Using two browser windows

My guess would be something along the lines of this. So you’d have two windows (each running in their own render process) and then send messages between the two via the main process.


Well, as @jpittner said, I had to send the messages via the main process
As second codesource I saw here.

So I get this code working:

index.html (mainWindow)

<button type="button" id="btn">Hallo</button>
const ipcRenderer = require('electron').ipcRenderer;
let btn = document.getElementById("btn");
btn.addEventListener('click', function () {
  ipcRenderer.send('asynchronous-message', 'button-pressed');

projector.html (SecondWindow)

require('electron').ipcRenderer.on('ping', function(event, message) {
  if(message=="button-pressed") {
    h = document.getElementById("heading");
    h.innerHTML = "Text2"


const ipcMain = electron.ipcMain;
  ipcMain.on('asynchronous-message', function(event, arg) {
  secondWindow.webContents.send('ping', 'button-pressed');