Electron Redirect to Browser Using Anchor Tag

Question

I'm trying to open www.google.com using an anchor tag.

I have this html embedded in my React code.

<a href="www.google.com" target="_blank">Go to link</a>

From research, this is how you're supposed to configure Electron:

const { app, BrowserWindow, Menu, MenuItem, shell } = require('electron');
const contextMenu = require('electron-context-menu');
const path = require('path');
const electronDl = require('electron-dl');

electronDl();

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
    },
    title: 'Test',
  });

  win.loadURL('http://localhost:3000');

  win.webContents.on('new-window', function(event, url) {
    event.preventDefault();
    shell.openExternal(url);
  });
}

The problem is, when I click the link it opens the browser but loads:

http://localhost:3000/www.google.com#/

Any ideas?

Answer 1

new-window is deprecated. One way to open a link in the browser is to include this in your click event handler:

require("child_process").execSync(`start ${link}`);