Loading new html in the same browserwindow in electron

Question

I am completely new to electron.js and I was just trying to load a new page(calling it index2.html) in the same BrowserWindow(which has already loaded index1.html) on a button click.The way I am trying to accomplish this is when a button is clicked, the rendering process corresponsing to the BrowserWindow sends an ipc event to the main Process, the main process then loads a new html into the BrowserWindow by calling loadFile(). The issue I am facing here is after the button click, the new page does not load. I have verified that the ipc event is being caught by the main process using console print. Also, other actions on the window like window minimize are working. Can somebody help me understand where I am going wrong?

This is my directory structure

package.json

{
    "name": "hello-world",
    "version": "1.0.0",
    "main": "main.js",
    "devDependencies": {
        "electron": "^9.2.0"
    },
    "scripts":{
        "start":"electron ."
    }
}

main.js

console.log("Main process running");
const electron = require("electron");
const app = electron.app ;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");
const ipc = electron.ipcMain 
let win;


function createWindow()
{
    
    win = new BrowserWindow({
        webPreferences: {nodeIntegration: true},
        show:false
    });
    win.loadFile('src/html/index.html');
    win.on('ready-to-show',()=>{
        win.show();
    })
    ;
    
    
}

ipc.on('login-success',function(event,arg){
    console.log("Hello World");//Making sure that main process catches the event
    //load new url
    win.loadFile('src/html/index2.html');//does nothing
    /*
    the following command works though
    win.minimize();
    */
    
    

});
app.on('ready',createWindow);

index.html




  
  
  
  ChatIn



  
    Sign in
    
      
      
      
      Forgot Password?

login.js

const electron = require("electron");
const ipc = electron.ipcRenderer;

const btnArray = document.getElementsByClassName("submit");
const loginBtn = btnArray[0];

loginBtn.addEventListener('click',(event)=>{
   ipc.send('login-success');
},false);

index2.html (I don`t think it will affect the problem in hand but still here it is)




    
    
    Welcome
    


    
        
          
             SimpleChat
          
          
            
          
        
      
        
          
            
      
            
              
                BOT
                12:45
              
      
              
                Hi, welcome to SimpleChat! Go ahead and send me a message. 
              
            
          
      
          
            
      
            
              
                Sajad
                12:46
              
      
              
                You can change your name in JS section!

Things I tried/noticed

Using loadURL instead of loadFile does not help. Trying to load a website instead of a local file also does not work using the method above.
Using win=null in the main ipc block does not close the browserwindow, but win.close() or win.destroy() works, no idea why.
Using var instead of let for win variable does not help.
Loading the new html into a new browserwindow and closing the previous browserwindow does the trick but still does not feel like the most elegant way to get the job done.

user_1778363 · Answer

try this

const { pathToFileURL } = require('url');

//...

win.loadUrl(pathToFileURL(path.resolve(__dirname, './html2.html')).href);

user_18679652 · Answer

It's been some time since you asked this question, and you probably figured it out but this may end up helping someone: you could use the IPC messaging module to do that, here is the link to the docs of this module: https://www.electronjs.org/pt/docs/latest/tutorial/ipc#ipc-channels.

The IPC works as an messager between the main process and the renderer process

For example, in the aplication that I'm working on I need to log in (wich is loaded in the main window) and, in case of success, redirect to another page (using the same browserWindow). To do that, I needed first to send the feedback from the renderer process that the login was successful to the main process, and then the main process will be responsible to load the new content.

This is how my renderer process is sending the message to the main process via IPC

//#region Modules
    var $ = require('jquery');
    const {ipcRenderer, ipcMain} = require('electron') //You must require the ipcRenderer
//#endregion

let btnLogin = $("#btnLogin")


btnLogin.on('click', e => {
    
    let txtLogin = $("#txtLogin").val(),
        txtSenha = $("#txtSenha").val()

    if (txtLogin == "")
    {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Você precisa informar o login',
        })
    }

    if (txtSenha == "")
    {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Você precisa informar a senha',
        })
    }
    
    if (txtLogin != "" && txtSenha != "")
    {
        var usuario = 
        {
            "email": txtLogin,
            "senha": txtSenha
        }

        $.ajax({
            //Simple ajax here
            complete: function (xhr, textStatus, jsonResult) {
                if (xhr.status == 400)
                {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Aconteceu algo de errado, tente novamente',
                    })
                }
                
                if (xhr.status == 200)
                {
                    //Salvar na sessão
                    Swal.fire({
                        icon: 'success',
                        title: 'Yes, yes, yes!',
                        text: 'Login efetuado com sucesso',
                    })

                    ipcRenderer.send('login-success') /*<- this is how the 
renderer process 
    send the message, using its IPC to send a message to the channel 
    'login-success' (you can name it as you like and also send whatever you need
                }
            }
        });
    }
})

And this is how my main.js is listening for the message sent from the renderer process

const {app, BrowserWindow, ipcMain} = require('electron') //You must require de ipcMain
const windowStateKeeper = require('electron-window-state')


let 
  mainWindow

function createWindow () {
  let state = windowStateKeeper({
    defaultWidth: 500,
    defaultHeight: 650
  })


  mainWindow = new BrowserWindow({
    x: state.x, y: state.y,
    width: state.width, height: state.height,
    minWidth: 378, minHeight: 700,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true
    },
    icon: './icons8-headset-98.ico'
  })


  mainWindow.loadFile('renderer/login.html')

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed',  () => {
    mainWindow = null
  })

  state.manage(mainWindow)
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (mainWindow === null) createWindow()
})


ipcMain.on('login-success', e => { /*Here, the main process is listening in the same channel 
that the renderer process send the message, it needs to recieve the event callback too*/
  console.log('Entrou no main');
  mainWindow.loadFile('renderer/chamados.html') /*And lastly, you just have to load the new 
content in the window that you created previously*/
})

Loading new html in the same browserwindow in electron

2 Answers