在新选项卡中打开 iframe 源

Posted 2023-05-09

【中文标题】在新选项卡中打开 iframe 源

【英文标题】：Open iframe source in new tab

【发布时间】：2016-08-28 20:00:13

【问题描述】：

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

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

在尝试研究这是否可行时，我所能找到的只是人们在新标签页的 iframe 中打开链接，这不是我需要的。

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

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

所以我的问题是，是否可以在新标签页中打开 iframe 网址，如果可以，最有效的方法是什么？

我的 iframe 中的网站是跨域的，我无法编辑其来源。

我目前拥有的是这样的：

<iframe id="iframe" class="frame" name="iframe"   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 的同一页面）。

【参考方案1】：

我相信这应该是可能的

对于显示相同域内容的 iframe，您可以通过以下方式获取当前站点 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.

但这似乎可以从跨域 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();
 );

【参考方案2】：

这是一个首发。使用这样的标记：

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

【讨论】：

这似乎让我直接回到显示 iframe 的 URL？

你说的是原版吗？我在我的服务器上测试了我的脚本，它更新了指向用户当时在 iframe 中的任何位置的链接。

我可能遗漏了一些东西，你能看看我的第一篇文章并检查我的代码吗？