29
votes

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?

5

5 Answers

40
votes

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";
15
votes

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.

7
votes

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.

5
votes

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

2
votes

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>