How can I force external links from browser-window to open in a default browser from Electron?

Question

I\'m using the BrowserWindow to display an app and I would like to force the external links to be opened in the default browser. Is that even possible or I have to approach

Answer 1

Check whether the requested url is an external link. If yes then use shell.openExternal.

mainWindow.webContents.on('will-navigate', function(e, reqUrl) {
  let getHost = url=>require('url').parse(url).host;
  let reqHost = getHost(reqUrl);
  let isExternal = reqHost && reqHost != getHost(wc.getURL());
  if(isExternal) {
    e.preventDefault();
    electron.shell.openExternal(reqUrl);
  }
}

Answer 2

I haven't tested this but I assume this is should work:

1) Get WebContents of the your BrowserWindow

 var wc = browserWindow.webContents;

2) Register for will-navigate of WebContent and intercept navigation/link clicks:

wc.on('will-navigate', function(e, url) {
  /* If url isn't the actual page */
  if(url != wc.getURL()) {
    e.preventDefault();
    openBrowser(url);
  } 
}

3) Implement openBrowser using child_process. An example for Linux desktops:

var openBrowser(url) {
  require('child_process').exec('xdg-open ' + url);
}

let me know if this works for you!

Answer 3

For anybody coming by.

My use case:

I was using SimpleMDE in my app and it's preview mode was opening links in the same window. I wanted all links to open in the default OS browser. I put this snippet, based on the other answers, inside my main.js file. It calls it after it creates the new BrowserWindow instance. My instance is called mainWindow

let wc = mainWindow.webContents
wc.on('will-navigate', function (e, url) {
  if (url != wc.getURL()) {
    e.preventDefault()
    electron.shell.openExternal(url)
  }
})

Answer 4

Put this in renderer side js file. It'll open http, https links in user's default browser.

No JQuery attached! no target="_blank" required!

let shell = require('electron').shell
document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(event.target.href)
  }
})

Answer 5

For Electron 5, this is what worked for me:

• In main.js (where you create your browser window), include 'shell' in your main require statement (usually at the top of the file), e.g.:

  // Modules to control application life and create native browser window
  const {
      BrowserWindow,
      shell
  } = require('electron');
  

• Inside the createWindow() function, after mainWindow = new BrowserWindow({ ... }), add these lines:

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

Answer 6

If you're not using target="_blank" in your anchor elements, this might work for you:

  const shell = require('electron').shell;

  $(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
  });