31

I have this iframe code:

<iframe src="http://www.example.com" border="0" framespacing="0" marginheight="0" marginwidth="0" vspace="0" hspace="0" scrolling="yes" width="100%" frameborder="0" height="100%"></iframe>

What i'm trying to do is..when i click any link in iframe page..then i will go to it and the page will load and i will getout from the current page to the iframe link as a new page.

Something like target="_self" - not like the normal iframe which will go to this link without any changes in browser itself.

Example : iframe src : http://www.w3schools.com

When i click "Learn HTML" inside the iframe page..then i will go to http://www.w3schools.com/html/default.asp and my browser URL will change to it too.

So i just clicked a link inside the iframe and i go to it.

Any ideas?

user2203703
  • 1,955
  • 4
  • 22
  • 36
  • Possible duplicate of [How to force link from iframe to be opened in the parent window](https://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window) – Jason S Oct 04 '19 at 04:39

6 Answers6

42

Yes, you can use target="_parent" to achieve this.

"target="_parent" opens the linked document in the parent frame."

Example:

<a target="_parent" href="http://example.org">Click me!</a>

Edit:

If that's not working, you can try _top:

<a target="_top" href="http://example.org">Click me!</a>

Or base target:

<base target="_parent" />

Or window.top.location in JavaScript:

window.top.location = "http://example.com";
dsgriffin
  • 66,495
  • 17
  • 137
  • 137
  • @user2203703 I don't understand, this answers the question. you use target parent on the link inside the iframe.. – dsgriffin Mar 29 '13 at 23:33
  • I want to leave my page which have the iframe and goout to the link which i clicked inside the iframe – user2203703 Mar 29 '13 at 23:38
  • @user2203703 Yes.. that is what this does. You can on the link inside the iframe and you get re-directed from the page with the iframe to the new page. – dsgriffin Mar 29 '13 at 23:38
  • yes, it's really work with different domains but not work if the iframe for the same domain..any idea please ? – user2203703 Mar 29 '13 at 23:56
  • @user2203703 Try `target="_top"` or in javascript `window.top.location = "http://google.com";` – dsgriffin Mar 29 '13 at 23:58
  • 1
    the jsfiddle provided by @daniel currently does not work because the iframe that jsfiddle is using does not have the token "allow-top-navigation" in its sandbox attribute and because the target attribute on the link has _parent instead of _top – Will Newton Aug 25 '15 at 14:40
16

What you're looking for is <a href="..." target="_parent">

_parent will cause it to go to the parent frame

_top will cause it to go to the top-most level.

Either _parent or _top should work for your target.

Adam Plocher
  • 13,994
  • 6
  • 46
  • 79
  • 1
    Maybe I'm not clear on the question. The page in the iframe ... do you have control over the HTML in that page, or is it a third-party site? I updated my answer to include target=_top but of course that's assuming you have control over the contents of the frame. – Adam Plocher Mar 29 '13 at 23:46
7

You can use javascript to add the target to the links dynamically, something like this.

function onLoadIF(frame)
{
    var elements = frame.getElementsByTagName('a'),
        len = elements.length;

    while( len-- ) {
        elements[len].target = "_parent";
    }
}

And then add onload="onLoadIF(this)" to the iframe.

Ismael Serrano
  • 71
  • 2
5

Yes, just add target="_parent" on the link and it load on main page.

Skatox
  • 4,237
  • 12
  • 42
  • 47
3

If site opens in iframe then redirect to main site

<script>
    if (window.top.location != window.self.location) {
        top.window.location.href = window.self.location;
    }
</script>
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Sandeep Sherpur
  • 2,418
  • 25
  • 27
-1

Working solution for mobile safari and all other sane browsers, through javascript.

Safari iframes block opening links, and if your iframes are nested with no control over them (e.g. loaded as a vendor etc), this is a working method.

// https only
var redirLink = "https://www.google.com";
// create an anchor and simulate a click.
var a = document.createElement('a');
a.title = redirLink;
a.href = redirLink;
// only "_top" or "_parent" supported.
a.target = "_top"; 
// prevent the default behaviour of anchors and do the address change manually. This must be tied to user actions to work.
a.onclick="function(e){e.preventDefault();top.location.href=this.href}"
document.body.appendChild(a);
a.click();

References:

  1. How can I open a link in a nested iframe in the original window they're placed in?
danieltan95
  • 810
  • 7
  • 14