How to open update electron browser window with a new html file

Question

I am new to electron. I have two html pages and I want to open the second page when a button clicked. I have code this as follow, but I just get a blank window; not the second page.

This is index.js

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

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

exports.openWindow = (fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

This is login.js

const remote = require('electron').remote
const index = remote.require('./index.js')

var login = document.getElementById('login')
login.addEventListner('click', () => {
  var window = remote.getCurrentWindow()
  index.openWindow('pageTwo')
  window.close()
}, false)

login is the id of the html button.

I want to get the page two. How can I perform this?

Answer 1

You can easily achieve this by using IPCRenderer and IPCMain in order to pass the messages between the main process and the renderer.

index.js

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

app.on('ready',()=>{
  let win = new BrowserWindow({width:960, hehight:540})
  win.loadURL(`file://${__dirname}/login.html`)
})

ipcMain.on('open-new-window', (event, fileName) => {
  let win = new BrowserWindow({width:960, height:540})
  win.loadURL(`file://${__dirname}/` + fileName + `.html`)
}

As you can see, I altered your code only to add ipcMain and receive the message from the renderer.

login.js

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

let login = document.getElementById('login');
login.addEventListner('click', () => {
  ipcRenderer.send('open-new-window', 'pageTwo');
}, false);

The same goes for login.js and ipcRenderer.

The documentation explains way better than I do and can be found here for ipcMain and here for ipcRenderer.

Answer 2

I have looked at your code and from what I see you are requiring your main process, you can't do this, you need to use IPC to send a message from your render process or use the remote BrowserWindow object and get the window from an ID and use loadURL.

Using IPC

index.js

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

ipcMain.on("changeWindow", function(event, arg) {
    switch (arg) {
        case "page1":
            win.loadURL("Page1 URL");
            break;
        case "page2":
            win.loadURL("Page2 URL");
            break;
        case "page3":
            win.loadURL("Page3 URL");
            break;
        ...
    }
});

login.js

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

function onButtonClick() {
    ipcRenderer.send("changeWindow", "page2");
}

---

Second option using BrowserWindow remotely.

login.js

const { BrowserWindow } = require("electron").remote;

function onButtonClick() {
    let win = BrowserWindow.fromId("ID of your window");

    win.loadURL("URL you want to load (your login.html file)");
}

// OR

function onButtonClick() {
    let win = BrowserWindow.getFocusedWindow();

    win.loadURL("URL you want to load (your login.html file)");
}

// OR

function onButtonClick() {
    /*
        Not the best method but would work.
     */

    let wins = BrowserWindow.getAllWindows();

    let windowIndex = /* index of your window in the wins array */

    wins[windowIndex].loadURL("URL you want to load (your login.html file)");
}