How to know if an external URL is loaded successfully from the main process when using window.open() from the renderer process

Question

Is it possible to identify whether an external URL is loaded successfully or not from the main process, when window.open("http://example.com") is called from the renderer process?

Something like...

mainWindow.webContents.on('did-url-load', () => {
  // Do something
});

mainWindow.webContents.on('did-url-loading-failed', () => {
  // Do something
});

Answer 1

I worked this out by creating a new BrowserWindow object to load the URL sent from the renderer process and then used the loadURL promise to identify whether the external URL is loaded successfully or not. I am not sure if anything simpler than this can be done.

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  const urlWindow = new BrowserWindow({
    show: false,
  });
  urlWindow.maximize();
  urlWindow
    .loadURL(url)
    .then(() => {
      // Handle URL loaded successfully
    })
    .catch(() => {
      // Handle URL loading failed, like throw some error using dialog.showMessageBox
    });
  return {
    action: 'deny',
  };
});

Answer 2

In case you have control over the page you'd like to open, you could use cross window communication methods. In the new window you hook into an events that fits your needs (onload?) and send a mesg over to the other window.

Maybe an Iframe also serves your needs?

Have a look at: https://javascript.info/cross-window-communication

Cheers

Answer 3

On MDN's Window.open() page:

A WindowProxy object, which is basically a thin wrapper for the Window object representing the newly created window, and has all its features available. If the window couldn't be opened, the returned value is instead null.

So, i think you should just check for the return value of window.open:

var dir = 'https://www.url.com';
var newWindow = window.open(url, 'main');

if (newWindow== null) {
  // Failed
} else {
  // Success
}