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

标签 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 会显示一条消息:

Mixed Content: The page at 'https://parentwebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://childwebsite.com'. This request has been blocked; the content must be served over 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');
}

任何帮助将不胜感激。

最佳答案

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

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

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

来自 Mozilla 开发站点:

Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.

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

关于javascript - 如何使 IFrame 链接打开到新窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27183139/

相关文章:

javascript - 无法确定何时使用 JQuery 隐藏和显示加载动画

wordpress - woocommerce 将自定义结帐字段添加到电子邮件

wordpress - 在 wordpress 中 react 路由

javascript - iOS 7 中的跨域 cookie

JavaScript - 从 iframe 访问元素

html - YouTube 嵌入式视频高度仅在 IE9 中较短

javascript - 对于 IE9,如何使电子邮件上的光标移动到文本末尾?

java - 如何使用 Selenium 选择不同的元素?

javascript - 如何为 ie11 的 String.repeat 函数添加 polyfill?

javascript - 在 Woocommerce 可变产品的 jQuery 中获取选定的变化价格