如何使 IFrame 链接在新窗口中打开？答案

【问题标题】：How to cause an IFrame link to open into a new window?如何使 IFrame 链接在新窗口中打开？
【发布时间】：2014-11-28 06:30:54
【问题描述】：

我有一个使用 WP 构建并使用 SSL 的网站。在我网站的一个页面上，我添加了对另一个 http 网站的 iframe 调用。

这是我的 iframe 调用：

<div class="embed-responsive embed-responsive-16by9">
<iframe src="//childwebsite.com/" target="_blank"></iframe>
</div>

iframe 显示正确。现在，当您单击 iframe 中的任何内容时，Chrome 会显示一条消息，说

混合内容：“https://parentwebsite.com”处的页面通过 HTTPS 加载，但请求了不安全的资源“http://childwebsite.com”。此请求已被阻止；内容必须通过 HTTPS 提供。

我正在寻找的是当用户在 iframe 内单击时，在浏览器中打开一个新选项卡并让用户被重定向到子网站上的特定位置。

我尝试将 target="_blank" 添加到 iframe，但没有成功。

我也添加了以下JS，但是没有用

//pass the iframe to this iframe getting function 
function iframeRef( frameRef ) {
    return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('smugmugGallery') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
    links[i].setAttribute('target','_blank');
}

我们将不胜感激。

【问题讨论】：

标签： javascript wordpress iframe

【解决方案1】：

这里有两个问题。 SSL 问题和跨域问题。

您的 SSL 问题只能通过通过 SSL 提供 iframed 内容或通过非 SSL 提供父页面来解决。这将删除您看到的安全警报。
如果 iframed 内容来自其他域，则您无法断言对它的控制，至少对于跨浏览器而言不容易。

来自 Mozilla 开发网站：

试图访问框架内容的脚本受制于同源策略，并且不能访问大部分属性其他窗口对象，如果它是从不同的域加载的。这也适用于框架内试图访问其父级的脚本窗户。仍然可以实现跨域通信 window.postMessage。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting

【讨论】：

Matt 感谢您的回复...我可以让一个网站页面通过非 SSL 交付，而网站的其余部分通过 SSL 交付吗？
@meher-bala 是的，你可以。

【解决方案2】：

在 iframe 中使用基本标记并尝试一次。

<base target="_blank" />

你可以看到更多关于Base tag here的信息

【讨论】：