Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a link from Electron open in browser

People also ask

How do you open a link in a browser Electron?

To open an external link in an Electron's Project you will need the module Shell (https://www.electronjs.org/docs/api/shell#shell) and the method openExternal .

Can an Electron app run in browser?

As long as your main use of Electron is to create a 'native browser wrapper' for a web-app this is entirely possible. You'll probably have to step through your application and disable Electron specific functionality at multiple places.

What browser does Electron use?

Under the hood, Electron is powered by the Chromium rendering engine and Node. js. Chromium is the open-source part of Google's Chrome browser.


You can simply use :

require("shell").openExternal("http://www.google.com")

EDIT: @Arjun Kava's answer is much better these days.

This answer is quite old and assumes you have jQuery.

const shell = require('electron').shell;
  
// assuming $ is jQuery
$(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
});

mainWindow.webContents.on('new-window', function(e, url) {
  e.preventDefault();
  require('electron').shell.openExternal(url);
});

Requires that you use target="_blank" on your anchor tags.


To make all Electron links to open externally in the default OS browser you will have to add an onclick property to them and change the href property so it doesn't load anything in the Electron app.

You could use something like this:

aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
  aTags[i].href = "#";
}

But make sure the entire document has loaded before doing this otherwise it is not going to work. A more robust implementation would look like this:

if (document.readyState != "complete") {
  document.addEventListener('DOMContentLoaded', function() {
    prepareTags()
  }, false);
} else {
  prepareTags();
}

function prepareTags(){
  aTags = document.getElementsByTagName("a");
  for (var i = 0; i < aTags.length; i++) {
    aTags[i].setAttribute("onclick","require('shell').openExternal('" + aTags[i].href + "')");
    aTags[i].href = "#";
  }
  return false;
}

Remember that if you load external files you will have to make them go through this process as well after they are fully loaded.


Some handy solutions can be found in this gist.

By listening on the body, the following solutions will work on <a> tags that may not yet exist when the JavaScript runs, but only appear in the DOM at a later time.

This one by luizcarraro requires jQuery:

$('body').on('click', 'a', (event) => {
  event.preventDefault();
  require("electron").shell.openExternal(event.target.href);
});

You can change the selector to target only certain links, e.g. '#messages-view a' or 'a.open-external'.

Here is an alternative without any library (derived from zrbecker's):

document.body.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a') {
    event.preventDefault();
    require("electron").shell.openExternal(event.target.href);
  }
});

Consult the gist for more examples.


My code snippet clue accordingly to the depreciations in Electron version ^12.0.0

const win = new BrowserWindow();
win.webContents.setWindowOpenHandler(({ url }) => {
    // config.fileProtocol is my custom file protocol
    if (url.startsWith(config.fileProtocol)) {
        return { action: 'allow' };
    }
    // open url in a browser and prevent default
    shell.openExternal(url);
    return { action: 'deny' };
});