I want to open an iframe link in a browser using electron. I found some solutions but they are not working, here are examples I tried:

• npmjs

• stackoverflow

I think the problem is, that the link is in the scr Tag.

Looking for a possible solution why nothing is working

Here is an example iframe element

<iframe src=";p=48&l=ur1&category=channels&banner=138WWDCBD6MQJVWGMHG2&f=ifr&linkID=0335593f7b48da8f8d1dab568039dc08&t=adrgoe-21&tracking_id=adrgoe-21" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>

And here is my Electron code

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

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

I want to open an iframe link in a browser using electron. I found some solutions but they are not working, here are examples I tried:

• npmjs.

• stackoverflow

I think the problem is, that the link is in the scr Tag.

Looking for a possible solution why nothing is working

Here is an example iframe element

<iframe src="https://rcm-eu.amazon-adsystem./e/cm?o=3&p=48&l=ur1&category=channels&banner=138WWDCBD6MQJVWGMHG2&f=ifr&linkID=0335593f7b48da8f8d1dab568039dc08&t=adrgoe-21&tracking_id=adrgoe-21" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>

And here is my Electron code

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

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

• javascript
• jquery
• html
• iframe
• electron

• Please provide code that you are having trouble with. – escapesequence Commented Aug 28, 2017 at 19:27
• pastebin./raw/XUdb7DdV – Adrian Commented Aug 28, 2017 at 20:48

3 Answers 3

I found a solution. I changed the iframe to a webview:

<webview id="webview" src="https://stackoverflow./" nodeintegration></webview>

The JS is now:

const {shell} = require('electron')
const webview = document.querySelector('webview')
webview.addEventListener('will-navigate', (e) => {
  const protocol = require('url').parse(e.url).protocol
  if (protocol === 'http:' || protocol === 'https:') {
    shell.openExternal(e.url)
  }
});

Instead of 'will-navigate' you can choose different actions. Find the all here

webview.addEventListener('will-navigate', (e) => {

Now I have to find out, how to stop change the page in the webview. But it open the link in the default browser.

You are detecting clicks on a[href^="http"] but your tag is an iframe

Really you should give the iframe an id or something then handle your click targeting it. e.g.

<iframe id="myframe" src="...></iframe>

and

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

// assuming $ is jQuery
$(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    var iframe = document.getElementById('myframe')
    console.log(iframe, event.target) // what are these?
    if(iframe) {
       shell.openExternal(iframe.href);
    }
});

If I understand the threads on github one way to do this is to use a <webview> instead of an <iframe>. Then put code like this in your main.js/browser process NOT the renderer process

app.on('web-contents-created', (event, contents) => {
  if (contents.getType() === 'webview') {
    contents.on('will-navigate', (event, url) => {
      event.preventDefault();
      shell.openExternal(url);
    });
  }
});

Putting code in the renderer process won't work, at least as of Electron 1.8.4