附加到 IFRAME 中的链接 URL答案

【问题标题】：Appending to link URL in an IFRAME附加到 IFRAME 中的链接 URL
【发布时间】：2012-02-16 10:13:33
【问题描述】：

我有一个带有 IFRAME 的页面。 IFRAME 包含指向 RSS 文章的新闻源链接。我想附加到每篇文章 URL target="_blank"，以便每篇文章在新窗口中打开，而不是 IFRAME。我不想更改原始新闻源页面的布局或功能，因此我希望在单击时动态附加到 URL。主页和 IFRAME 页面在同一个域中。任何帮助将不胜感激。

示例代码：

<html>
<head>
</head>
<body>
<iframe src="http://vangopainting.net/painting-tips?tmpl=component"></iframe>
</body>
<html>

如您所见，上面的 URL 拉取了一个剥离的 Joomla 页面，只显示了内容。这个 IFRAME 将嵌入到 Facebook 页面中，当用户点击链接时，它会将整个站点嵌入到 IFRAME 中，而不仅仅是文章。我希望通过将 target="_blank" 附加到 URL 或什至将 ?tmpl=component 附加到 URL 以便 Joomla 删除除文章之外的所有内容，从而在新窗口而不是 IFRAME 中打开它。

编辑添加：好的...这是我的代码：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(function() {
        $('iframe').load(function(){
            $('a',$(this).contents()).each(function(){this.href = this.href + "?tmpl=component";});
        });
    });
</script>
</head>
<body>
<iframe src="link.html" width="100%" height="50px" frameborder="0" scrolling="no"></iframe>
<iframe src="http://vangopainting.net/painting-tips?tmpl=component" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</body>
</html>

我添加第一个 iframe 只是为了在 Facebook 中进行测试。

link.html 中的内容：

<html>
<head>
</head>
<body>
<a href="http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly">http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly</a>
</body>
</html>

这是该页面的直接链接：http://vangopainting.net/fb/tabs/paintingtips/index.html 一切正常。

这里是 Facebook 页面的链接：https://www.facebook.com/pages/Van-Go-Painting-Inc/177992368936448?sk=app_366401100043274 第一个 iframe 的 URL 按原样附加，但第二个 iframe 保持不变。

我不知道为什么这不起作用。

【问题讨论】：

标签： javascript jquery html iframe append

【解决方案1】：

这应该适合你。

$('a',$('iframe').contents()).attr('target','_blank');

简而言之，它会抓取所有iframes 的内容，找到它们的a 标签，并应用适当的target 属性。

在您的示例中的 head 标记内添加以下（未经测试的）代码 sn-p 以达到预期的效果。

<script>
    $(function() {
        $('iframe').load(function(){
            $('a',$(this).contents()).attr('target','_blank');
        });
    });
</script>

上面的sn-p中发生的事件有很多等待。

首先，我们等待passing a callback function to $ 加载页面。我们希望等待页面加载，以便我们知道我们可以找到我们的iframes。
执行该回调时，我们会找到所有 iframes 并附加一个不同的回调，以便在加载它们时调用。
这个不同的回调是代码 sn-p，它执行查找 a 标记并修改它们的实际工作。

【讨论】：

@yahelc 根据the documentation，该限制仅适用于使用attr() 检索值；设置值时，它适用于所有匹配的元素。
你能根据我的示例代码给我一个例子吗？还在学习，需要看一个可视化的应用。代码到底应该放在哪里，在主页中？
@CurtisHolzschuh 我已经修改了我的答案。但我没有测试它，所以......祝你好运！ :)
作为独立页面效果很好：vangopainting.net/fb/tabs/paintingtips/index.html，但嵌入到 Facebook 中不起作用：facebook.com/pages/Van-Go-Painting-Inc/…
好的...我明白了。问题是现在 Facebook 需要一个安全的应用程序服务器，索引页面（通过 HTTPS 提供）通过服务器上的共享证书链接。但是 IFRAME 是直接链接的，所以到浏览器，我试图跨域脚本。我必须关闭 Joomla SEF 才能通过 HTTPS 访问 IFRAME 页面。感谢您的帮助！

【解决方案2】：

您可以使用 .contents 访问 iframe 的内容，然后使用 .find 查找 iframe 中的元素，然后使用 each 根据您的喜好修改元素，因为您没有提供任何代码，所以我也要去坚持理论答案

【讨论】：