使用电子在浏览器中打开iframe链接

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:

我想在浏览器中使用电子打开iframe链接。我找到了一些解决方案，但它们不起作用，这里是我试过的例子：

npmjs.com

npmjs.com
*

堆栈溢出

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

我认为问题是，链接在scr Tag中。

Looking for a possible solution why nothing is working

寻找可能的解决方案，为什么没有任何工作

Here is an example iframe element

这是一个iframe元素示例

<iframe src="https://rcm-eu.amazon-adsystem.com/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);
});

3 个解决方案

#1

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

我找到了解决方案。我将iframe更改为webview：

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

The JS is now:

JS现在是：

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.

现在我必须找出，如何停止在webview中更改页面。但它在默认浏览器中打开链接。

#2

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

您正在检测[href ^ =“http”]上的点击次数，但您的代码是iframe

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

实际上你应该给iframe一个id或者其他东西，然后处理你的点击目标。例如

<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);
    }
});

#3

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

如果我理解github上的线程，一种方法是使用而不是。然后将这样的代码放在main.js / browser进程中而不是渲染器进程&lt;/p&gt;

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

将代码放在渲染器进程中是行不通的，至少从Electron 1.8.4开始

#1