413

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.

1

14 Answers 14

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

14
  • 5
    How does this fare cross-browser? Jan 23, 2012 at 20:00
  • 3
    @Wilf I was not quite correct: ;) <base target> should come before any <a href>, since it sets the default browsing context for following links; <base href> should come before any URL reference (<* href> <* src> <form action> <object data>…) since it sets the base URL against which relative URLs are resolved.
    – sam
    Jun 14, 2014 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, 2014 at 8: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! Aug 20, 2014 at 23:54
  • 1
    Note that the <base tag has no closing according to the specification w3.org/TR/html5/document-metadata#the-base-element so it should be <base target="_parent" > Mar 17, 2017 at 12:31
178

Use target-attribute:

<a target="_parent" href="http://url.org">link</a>
3
  • 13
    <base target="_blank"> 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 4, 2015 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. Nov 4, 2021 at 11:24
  • opening in same tab as required. not in new tab. works fine
    – S K R
    Dec 15, 2021 at 13:12
43

With JavaScript:

window.parent.location.href= "http://www.google.com";
1
  • 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!! Jul 7, 2021 at 7:56
39

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>
1
  • 1
    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 6, 2017 at 10:52
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.

1
  • is this inherited in nested iframes ?
    – beppe9000
    Jan 2, 2020 at 14:35
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.

3
7

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

2
  • i try this , is open in new window
    – Haim Evgi
    Jun 24, 2009 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, 2009 at 12:44
7

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

6

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.

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!

2

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.

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

Try target="_top"

<a href="http://example.com" target="_top">
   This link will open in same but parent window of iframe.
</a>
2
-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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.