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

【问题标题】：Open iframe link in the browser using electron使用电子在浏览器中打开 iframe 链接
【发布时间】：2018-02-06 02:21:53
【问题描述】：

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

我认为问题在于，链接在 scr 标签中。

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

这是一个示例 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>

这是我的电子代码

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

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

【问题讨论】：

请提供您遇到问题的代码。
pastebin.com/raw/XUdb7DdV

标签： javascript jquery html iframe electron

【解决方案1】：

您正在检测对a[href^="http"] 的点击，但您的标签是iframe

真的，您应该给 iframe 一个 id 或其他东西，然后处理您的点击定位它。例如

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

和

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

【讨论】：

我尝试使用代码并在上面尝试了一些东西。但我不明白标准浏览器中的链接已打开。

【解决方案2】：

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

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

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

您可以选择不同的操作，而不是“will-navigate”。 Find the all here

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

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

【讨论】：

【解决方案3】：

如果我理解 github 上的 threads，一种方法是使用 <webview> 而不是 <iframe>。然后把这样的代码放在你的 main.js/browser 进程中NOT渲染器进程

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

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

【讨论】：