[英]Open iframe source in new tab
我有一个iframe,人们可以浏览到达一个特定的地方,但因为它是跨域的网站上的一些JavaScript不起作用(例如查看产品历史记录......)
我一直试图找到一种方法来创建一个按钮,该按钮将占用用户在iframe中的任何页面,并在新选项卡中打开该链接。
在尝试研究是否可行的同时,我所能找到的是人们在新标签中打开iframe中的链接,这不是我需要的。
我需要创建一个按钮,onclick将打开一个新选项卡,其中包含用户当前在iframe中的任何链接。
我没有真正尝试过很多东西,因为我找不到任何关于这个主题的东西(可能是由于可怕的措辞),但我认为我最好的机会是jquery / javascript,但是,我不是很流利的javascript。
所以我的问题是,是否可以在新标签中打开iframe网址,如果是这样,那么最有效的方法是什么?
我的iframe中的网站是跨域的,我无法编辑其来源。
我现在拥有的是:
<iframe id="iframe" class="frame" name="iframe" height="100%" width="100%" onload="refreshLink(this.contentWindow.location.href)"></iframe>
注意:src由页面加载时的javascript设置。
在那之下我有:
<script>
var hyperLink = document.getElementById("iframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
</script>
最重要的是我:
<a href="#" target="_blank" class="btn btn-info" id="button">Open in R1</a>
但是,当我在任何给定时间单击该按钮时,它会打开一个新选项卡到我之前所在的同一个URL(一个选项卡转到显示iframe的同一页面)。
我相信这应该是可能的
对于显示相同域内容的iframe,您可以使用以下内容获取当前网站网址:
document.getElementById("myframeID").contentWindow.location.href
但是对于跨域iframe,当您尝试以相同的方式获取网站上的位置时,您将收到以下错误:
VM2536:2 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
但是,这似乎可以从跨域iframe中获取正确的URL
document.getElementById('myframeID').src
为了完成你可以做这样的事情(假设你的标签使用jQuery):
$('body').on('click','#button', function(){
var url = document.getElementById('myframeID').src;
var tabOrWindow = window.open(url, '_blank');
tabOrWindow.focus();
});
这是一个首发。 使用这样的标记:
<iframe id="myIframe" src="http://yourwebsite.com"></iframe>
<a href="#" target="_blank" id="button">Click here</a>
从一些JS开始,将锚点的href
更改为iframe
的src
:
var hyperLink = document.getElementById("myIframe").src;
document.getElementById("button").href=hyperLink;
向iframe
添加onload
属性:
<iframe id="myIframe" src="http://yourwebsite.com" onload="refreshLink(this.contentWindow.location.href)">
</iframe>
行onload="refreshLink(this.contentWindow.location.href)"
获取用户导航的iframe的当前URL,并将其作为函数refreshLink
的参数发送。
然后我们可以声明该函数,完整的JS代码如下所示:
var hyperLink = document.getElementById("myIframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
这有效,但它取决于每个网站有关iframe和http / https的任何政策。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.