Retry loading a webpage when failed in electron

Question

I'm using electron to display some webpages. Below is my coding:

var app = require('app');
var ipc = require('ipc');
var BrowserWindow = require('browser-window');
var settings = require('./settings');

var mainWindow = null;

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

app.on('ready', function(){
    var mainWindow = new BrowserWindow({
        fullscreen: true,
        autoHideMenuBar: true
     })

     mainWindow.loadUrl('file://' + __dirname + '/index.html') // FIRST WEBPAGE

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

ipc.on('redirect', function(){
    mainWindow.loadUrl('http://192.168.1.10/page2')  // SECOND WEBPAGE

    mainWindow.webContents.on("did-fail-load", function() {
        console.log("did-fail-load");

        mainWindow.loadUrl('file://' + __dirname + '/index.html');   
 // REDIRECT TO FIRST WEBPAGE AGAIN
    });

});

It will first go into the first webpage, then after it received a command "redirect" from the javascript using ipc module, it will redirect to a second webpage. But I need to check whether or not the second webpage can be connected. If it cannot be connected (did-fail-load), it will go to the first webpage again. And the cycles goes on.

I use the console.log("did-fail-load") to check whether or not it had failed to connect to the second page. But I found out that it had duplicated the call. The first time it fail to connect to second webpage, there is one console.log("did-fail-load"), when it retry the second time, there is two console.log("did-fail-load") appear, and the 3rd time it retry, there is three console.log("did-fail-load") appear. Is it that it some how got duplicated calls on mainWindow?

What is the best way to retry loading a webpage when it failed in electron?

Answer 1

This is an old post, but I feel the question was never actually answered for OP.

You are seeing multiple console.log messages because a new did-fail-load callback is added everytime a redirect happens. You need to add the callback only once, outside of the ipc.on('redirect') callback. Example:

app.on('ready', function(){
  var mainWindow = new BrowserWindow({
    fullscreen: true,
    autoHideMenuBar: true
  })

  mainWindow.loadUrl('file://' + __dirname + '/index.html') // FIRST WEBPAGE

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
  
  /* Set did-fail-load listener once */
  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");

    mainWindow.loadURL('file://' + __dirname + '/index.html');
  });
});

/* This is called every time a redirect occurs, so don't add any 
 * listeners here. Only add codeto handle the redirect
 */
ipc.on('redirect', function(){
  mainWindow.loadURL('http://192.168.1.10/page2')  // SECOND WEBPAGE
});

Editors Note: The function loadUrl was replaced with loadURL some years ago. The code has been updated to use the newer correct version.