Can't open Electron webview links with target = blank

3
votes

I'm using Electron I have a webview which display an external website but I can't succeed to show the additional window normally opened by links on this site and which have target = _blank.

<a href="mentions.html" target="_blank">Mentions légales </a>

I tried with

webpreferences="nativeWindowOpen=yes" allowpopups

But it didn't change.

2
webviewwindowelectron

2 Answers

5
votes

With a webview, you can actually handle these on the main process quite easily.

Which also allows you to disable nodeIntegration should that be a requirement.

// Listen for web contents being created
app.on('web-contents-created', (e, contents) => {

  // Check for a webview
  if (contents.getType() == 'webview') {

    // Listen for any new window events
    contents.on('new-window', (e, url) => {
      e.preventDefault()
      shell.openExternal(url)
    })
  }
})
3
votes

After digging into the documentation I wrote this code (code located in the renderer):

const {BrowserWindow} = require('electron').remote

..........

 webview1.addEventListener('new-window', (e) => {
    const protocol = require('url').parse(e.url).protocol
    if (protocol === 'http:' || protocol === 'https:') {
      //shell.openExternal(e.url)
      let win = new BrowserWindow({width: 800, height: 600})
      win.loadURL(e.url);
    }
  })

The line shell.openExternal(e.url) open the url of the link in a tab of the default browser. And by using a new BrowserWindow, the new windows are Electron Window.