在新选项卡中打开iframe源

Open iframe source in new tab

本文关键字：iframe 新选项 选项      更新时间：2023-09-26

我有一个iframe，人们可以通过它导航到特定的地方，但由于它是跨域的，网站上的一些javascript不起作用（例如查看产品历史…）

我一直在试图找到一种方法来制作一个按钮，该按钮将占用用户在iframe中的任何页面，并在新的选项卡中打开该链接。

当我试图研究这是否可能时，我所能找到的只是人们在一个新的选项卡中从iframe中打开链接，这不是我所需要的。

我需要制作一个按钮，onclick将打开一个新的选项卡，其中包含用户当前在iframe中的任何链接。

我没有真正尝试过很多东西，因为我找不到任何关于这个主题的东西（可能是因为措辞糟糕），但我认为我最好的机会是jquery/javascript，然而，我对javascript不是很流利。

所以我的问题是，是否有可能将iframes url打开到一个新的选项卡中？如果有，最有效的方法是什么？

我的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显示的同一页面的选项卡）。

我认为这应该是可能的

对于显示相同域内容的iframes，您可以使用以下内容获取当前网站的url：

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.

然而，这似乎可以从跨域iframes 中获得正确的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;

将onload属性添加到iframe:

<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的任何政策。

相关文章：