logo标签列表

如何强制从iframe中打开的链接在父窗口中打开？

htmliframehyperlinkhtml-target
415

我需要在同一父页面打开链接，而不是在新页面中打开。

注意： iframe 和父页面属于相同的域名。

可能是[将iframe链接加载到父窗口？]的重复问题(https://dev59.com/9GUo5IYBdhLWcg3w3ycF) - clickbait
14个回答
712

我发现最好的解决方案是使用base标签。在iframe页面的头部添加以下内容:

<base target="_parent">

这将在父窗口中加载页面上的所有链接。如果您希望链接在新窗口中加载，请使用：

<base target="_blank">

浏览器支持

5
这个在各种浏览器中的表现如何？ - Charlie Schliesser
3
@Wilf，我之前说得不太正确：;) <base target> 应该放在任何 <a href> 之前，因为它设置了后面链接的默认浏览上下文；而 <base href> 应该放在任何 URL 引用（<* href> <* src> <form action> <object data>…）之前，因为它设置了相对 URL 解析的基础 URL。 - sam
9
为什么你在我回答这个问题一年之后回答了同样的答案，但是你被选中了，这太奇怪了。 - vsync
12
我觉得原因是你的回答在新窗口打开链接，而我的在iframe的父级窗口打开链接，这才是原始问题。抱歉抢了你的风头！ - Chris Vasselli
1
此外，它不应该是 _parent 而应该是 _top 吗？ - Jason S
显示剩余9条评论
178

使用 target 属性：

<a target="_parent" href="http://url.org">link</a>
13
<base target="_blank"> 可以使用，但这里的问题是关于一个链接，而不是改变 iframe 上所有链接的行为。对我来说，这是正确的答案。 - kriskodzi
将链接在父窗口的新标签页中打开怎么样？上面的示例在父窗口的同一标签页中打开链接。 - Deyan Peychev
在同一标签页中打开所需内容，而不是在新标签页中打开。运行良好。 - S K R
43

使用JavaScript：

window.parent.location.href= "http://www.google.com";
1
这个解决方案对我很有效。我有一个按钮标签，希望在单击后重新加载相同页面以使用新的URL。该按钮位于iFrame中，因此需要使用新的URL重新加载页面而不是iFrame。使用window.parent非常好用。感谢您！ - Anish Aralikatti
39

如只针对父页面：

如果您想将所有链接在父页面或父iframe中打开，则可以在iframe的head部分使用以下代码：

<base target="_parent" />

或者

如果您想要将特定链接在父页面或父iframe中打开，则可以使用以下方法：

<a target="_parent" href="http://specific.org">specific Link</a>
<a  href="http://normal.org">Normal Link</a>

或

如果存在嵌套的 iframe：

如果想要在浏览器窗口中打开所有链接（在浏览器URL中重定向），则在iframe的头部部分使用以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $("a").click(function(){
            top.window.location.href=$(this).attr("href");
            return true;
        })
    })
</script>

或者

如果您想将一个特定的链接打开到浏览器窗口（重定向到浏览器URL），那么可以使用以下方法：

<a  href="http://specific.org"   target="_top" >specific Link</a>
或者
<a  href="javascript:top.window.location.href='your_link'">specific Link</a>
<a  href="javascript:top.window.location.href='http://specific.org'">specific Link</a>
<a  href="http://normal.org">Normal Link</a>
1
好的答案，我只需要将其用于特定链接，但是被接受的答案仅描述了如何更改页面上所有链接的目标。谢谢。 - dading84
19

有一个 HTML 元素叫做 base，它可以让您：

指定页面上所有链接的默认 URL 和默认目标：

<base target="_blank" />

通过指定_blank，您可以确保在iframe内部的所有链接都会在外部打开。

这个在嵌套的 iframe 中继承吗？ - beppe9000
7
如果您在网页中使用iframe，当通过HTML超链接（锚标签）从iframe更改整个页面时，您可能会遇到问题。有两种解决方案可以缓解这个问题。
解决方案1：您可以使用锚标签的target属性，如下例所示。
<a target="_parent" href="http://www.kriblog.com">link</a>

解决方案2：您可以使用JavaScript在iframe中打开一个新页面，该页面位于父窗口中。
<a href="#" onclick="window.parent.location.href='http://www.kriblog.com';">

记住：在 XHTML 中，target="_parent" 已经被弃用，但是在 HTML 5.x 中仍然受支持。

更多内容请参考以下链接：http://www.kriblog.com/html/link-of-iframe-open-in-the-parent-window.html

7
尝试在锚标签内使用target="_parent"属性。
我尝试这个，它在新窗口中打开。 - Haim Evgi
4
尝试使用target="_top"。iframe可能包含嵌套的iframes。或者实际链接是在onclick事件上通过JavaScript打开的。 - Gee
7

正如注意到的那样，您可以使用target属性，但在XHTML中已被技术上弃用。这就留下了使用JavaScript的选择，通常会使用parent.window.location之类的内容。

10
target 属性不再被废弃。 - Paul D. Waite
@PaulD.Waite，您发布的链接现在已经404了。 - dwlz
1
@Dan：啊哈，是的谢谢。新链接：http://dev.w3.org/html5/spec/links.html#links-created-by-a-and-area-elements - Paul D. Waite
6

最为通用且兼容各大浏览器的解决方案是避免使用"base"标签，而是使用"a"标签的target属性：

<a target="_parent" href="http://www.stackoverflow.com">Stack Overflow</a>
<base> 标签的用途较少，浏览器对其在文档中的位置要求不一致，需要进行更多的跨浏览器测试。根据您的项目和情况，实现 <base> 标签的理想跨浏览器位置可能很困难，甚至完全不可行。
通过 <a> 标签的 target="_parent" 属性来实现此目的不仅可以更好地兼容不同的浏览器，还可以使您区分希望在 iframe 中打开的链接和希望在父页面中打开的链接。
4

<a target="parent">会在新标签页/窗口中打开链接...<a target="_parent">会在父级/当前窗口中打开链接，不会打开新的标签页或窗口。别忘了下划线！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接