How to force link from iframe to be opened in the parent window

Question

I need to open the link in the same parent page, instead of open it in a new page.

note : The iframe and parent page are the same domain.

Possible duplicate of [Load iframe links into parent window?](https://stackoverflow.com/questions/15712880/load-iframe-links-into-parent-window) — clickbait, Jul 26 '18 at 03:12

score 711 · Accepted Answer · edited Feb 27 '21 at 22:04

711

I found the best solution was to use the base tag. Add the following to the head of the page in the iframe:

<base target="_parent">

This will load all links on the page in the parent window. If you want your links to load in a new window, use:

<base target="_blank">

Browser Support

edited Feb 27 '21 at 22:04

Marcus

4,400
13
48
64

answered Apr 17 '10 at 00:52

Chris Vasselli

13,064
4
46
49

5

How does this fare cross-browser? – Charlie Schliesser Jan 23 '12 at 20:00
seems buggy in IE, might need to be placed above other things in the head of the page, see http://ow.ly/d6i5Q – dougmacklin Aug 20 '12 at 18:53
@KristopherIves Thanks! I've updated my answer with a link to SitePoint documentation on browser compatibility. – Chris Vasselli Nov 03 '12 at 10:28
If you use ``, make sure to put it before any other URL reference (`href= src=` etc.) – sam Dec 18 '13 at 22:42
Awesome, I needed to use ``. Other than that thank you for laying out the initial solution. :) – isurfbecause Mar 10 '14 at 14:59
This is not an answer to the question. The OP didn't say he needs to redirect *all* of the links in the parent. The correct basic answer is the one of @nnevala. – Tomas Jun 02 '14 at 20:11
3

@Wilf I was not quite correct: ;) `` should come before any ``, since it sets the default browsing context for following links; `` should come before any URL reference (`<* href>` `<* src>` `
` `
– sam Jun 14 '14 at 19:08
9

why did you answer this question a year **after** I had answered it, with the exact same answer? but you were picked. this is so strange. – vsync Aug 20 '14 at 08:22
12

I think it's because your answer opens the link in a new window, whereas mine opens it in the parent window of the iframe, which was the original question. Sorry to steal your thunder! – Chris Vasselli Aug 20 '14 at 23:54
Be sure to set your ``'s `sandbox` attribute to `allow-top-navigation` to give this solution to the best chance to work. I learned this the hard way today. Make my pain your gain. – bongbang Jun 30 '16 at 03:38
1

Note that the `` – Mark Schultheiss Mar 17 '17 at 12:31
sitepoint link in this answer is broken. Better to link to w3.org. – Jason S Oct 04 '19 at 04:44
1

Also, shouldn't it be `_top` rather than `_parent`? – Jason S Oct 04 '19 at 04:45
not sure that this is a good solution imho.. I've figured out with this question and wrote post here https://alfilatov.com/posts/how-to-open-links-from-iframe/ – Alex Filatov Oct 01 '20 at 23:16

score 178 · Answer 2 · answered Jun 24 '09 at 11:51

178

Use target-attribute:

<a target="_parent" href="http://url.org">link</a>

answered Jun 24 '09 at 11:51

nnevala

5,779
2
20
13

13

`` is ok, but the question here is about one link, not about changing behavior of all links on iframe. For me this is the correct answer. – kriskodzi Feb 04 '15 at 10:57
What about opening the link a new tab of the parent? The example above opens the link in the same tab of the parent window. – Deyan Peychev Nov 04 '21 at 11:24
opening in same tab as required. not in new tab. works fine – S K R Dec 15 '21 at 13:12

score 43 · Answer 3 · edited Aug 03 '12 at 22:32

43

With JavaScript:

window.parent.location.href= "http://www.google.com";

edited Aug 03 '12 at 22:32

Nikola K.

7,093
13
31
39

answered Aug 03 '12 at 04:15

yenssen

1,171
2
23
37

1

this solution worked properly for me. I had a button tag from which on click I wanted the same page to reload with a new URL. The button was present in an iFrame so needed the page to reload with the new URL and not the iFrame. Using window.parent worked wonders. Thanks for this!! – Anish Aralikatti Jul 07 '21 at 07:56

Ahosan Karim Asik · Answer 4 · 2015-09-12T10:33:40.387

You can use any options

in case of only parent page:

if you want to open all link into parent page or parent iframe, then you use following code in head section of iframe:

<base target="_parent" />

OR

if you want to open a specific link into parent page or parent iframe, then you use following way:

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

OR

in case of nested iframe:

If want to open all link into browser window (redirect in browser url), then you use following code in head section of 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>

OR

if you want to open a specific link into browser window (redirect in browser url), then you use following way:

<a  href="http://specific.org"   target="_top" >specific Link</a>

or

<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>

Good answer, I needed to just use this for a specific link, yet the accepted answer only describes how to change the target for all links on the page. Thanks — dading84, Jun 06 '17 at 10:52

vsync · Answer 5 · 2018-05-24T12:07:09.277

19

There's a HTML element called base which allows you to:

Specify a default URL and a default target for all links on a page:

<base target="_blank" />

By specifying _blank you make sure all links inside the iframe will be opened outside.

edited May 24 '18 at 12:07

answered Sep 10 '09 at 07:42

vsync

118,978
58
307
400

is this inherited in nested iframes ? – beppe9000 Jan 02 '20 at 14:35

score 7 · Answer 6 · edited Nov 28 '12 at 08:53

7

Try target="_parent" attribute inside the anchor tag.

edited Nov 28 '12 at 08:53

kongaraju

9,344
11
55
78

answered Jun 24 '09 at 11:51

Gee

175
2

i try this , is open in new window – Haim Evgi Jun 24 '09 at 11:52
4

Try target="_top". The iframe might contain nested iframes? Or the actual link is opened by javascript on onclick event? – Gee Jun 24 '09 at 12:44

score 7 · Answer 7 · answered Jun 25 '09 at 06:59

7

As noted, you could use a target attribute, but it was technically deprecated in XHTML. That leaves you with using javascript, usually something like parent.window.location.

answered Jun 25 '09 at 06:59

Ryan McGrath

2,042
14
23

10

[The `target` attribute is no longer deprecated](http://dev.w3.org/html5/markup/a.html#a.attrs.target). – Paul D. Waite Feb 11 '14 at 14:55
@PaulD.Waite the link you posted now 404s. – Dan Loewenherz May 21 '14 at 22:57
1

@Dan: aha, yes thank you. Fresh link: http://dev.w3.org/html5/spec/links.html#links-created-by-a-and-area-elements – Paul D. Waite May 31 '14 at 13:08

score 7 · Answer 8 · edited Sep 29 '17 at 10:02

If you are using iframe in your webpage you might encounter a problem while changing the whole page through a HTML hyperlink (anchor tag) from the iframe. There are two solutions to mitigate this problem.

Solution 1. You can use target attribute of anchor tag as given in the following example.

<a target="_parent" href="http://www.kriblog.com">link</a>

Solution 2. You can also open a new page in parent window from iframe with JavaScript.

<a href="#" onclick="window.parent.location.href='http://www.kriblog.com';">

Remember ⇒ target="_parent" has been deprecated in XHTML, but it is still supported in HTML 5.x.

More can be read from following link http://www.kriblog.com/html/link-of-iframe-open-in-the-parent-window.html

score 6 · Answer 9 · answered Oct 28 '14 at 19:21

The most versatile and most cross-browser solution is to avoid use of the "base" tag, and instead use the target attribute of the "a" tags:

<a target="_parent" href="http://www.stackoverflow.com">Stack Overflow</a>

The <base> tag is less versatile and browsers are inconsistent in their requirements for its placement within the document, requiring more cross-browser testing. Depending on your project and situation, it can be difficult or even totally unfeasible to achieve the ideal cross-browser placement of the <base> tag.

Doing this with the target="_parent" attribute of the <a> tag is not only more browser-friendly, but also allows you to distinguish between those links you want to open in the iframe, and those you want to open in the parent.

score 4 · Answer 10 · answered Oct 30 '13 at 16:45

4

<a target="parent"> will open links in a new tab/window ... <a target="_parent"> will open links in the parent/current window, without opening new tabs/windows. Don't_forget_that_underscore!

answered Oct 30 '13 at 16:45

krisjd

49
1

score 2 · Answer 11 · answered Oct 22 '15 at 04:13

Yah I found

<base target="_parent" />

This useful for open all iframe links open in iframe.

And

$(window).load(function(){
    $("a").click(function(){
        top.window.location.href=$(this).attr("href");
        return true;
    })
})

This we can use for whole page or specific part of page.

Thanks all for your help.

score 1 · Answer 12 · answered Jan 14 '17 at 08:20

   <script type="text/javascript"> // if site open in iframe then redirect to main site
        $(function(){
             if(window.top.location != window.self.location)
             {
                top.window.location.href = window.self.location;
             }
        });
    </script>

score 1 · Answer 13 · answered May 19 '17 at 19:13

1

Try target="_top"

<a href="http://example.com" target="_top">
   This link will open in same but parent window of iframe.
</a>

answered May 19 '17 at 19:13

Aamir Shahzad

6,683
8
47
70

isn't `"_top"` the same as `"_parent"` ? – svelandiag Jun 08 '20 at 16:40
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target – Boss COTIGA Nov 03 '21 at 16:54

score -2 · Answer 14 · answered Sep 16 '22 at 14:58

-2

I have found simple solution

<iframe class="embedded-content" sandbox="allow-top-navigation"></iframe>

allow-top-navigation Allows the iframe to change parent.location. For more info https://javascript.info/cross-window-communication

answered Sep 16 '22 at 14:58

SK Shewa

106
1
9

How to force link from iframe to be opened in the parent window

14 Answers14

Linked

Related