如何使IFrame链接打开到新窗口?

时间:2014-11-28 06:30:54

标签: javascript wordpress iframe

我有一个使用WP构建并使用SSL的网站。在我网站的其中一个页面上,我已经向另一个http网站添加了一个iframe调用。

以下是我的iframe电话:

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

iframe正确显示。现在,当您点击iframe内的任何内容时,Chrome会显示一条消息

  

混合内容:&#39; https://parentwebsite.com&#39;是通过HTTPS加载的,但请求了一个不安全的资源&#39; http://childwebsite.com&#39;。此请求已被阻止;内容必须通过HTTPS提供。

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

我尝试添加target =&#34; _blank&#34;到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');
}

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

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

  1. 您的SSL问题只能通过SSL提供iframed内容或通过非SSL提供父页面来解决。这将删除您看到的安全警报。

  2. 如果iframed内容来自其他域,则无法断言对iframed内容的控制,至少不容易出于跨浏览器目的。

  3. 来自Mozilla开发网站:

      

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

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

答案 1 :(得分:0)

在iframe中使用基本代码并尝试一次。

<base target="_blank" />

您可以详细了解Base tag here