Iframe Link Question

Question

I have an iframe on a page and there's a link inside the iframe. When user clicks on the link I want it to open in the current page (but not in the iframe), I want the current page to reload with the target of the link in the iframe.

How can I do that? I hope there is some javascript or jquery solution because I need to achieve this in my current project.

EDIT:

Or let's say there's a form in the iframe and when submitted I don't want the page to load in the iframe but to reload the whole page.

Answer 1

Make the target attribute of the anchor "_top".

Therefore:

<a href="#" target="_top">Test</a>

this works in FF

Edit Concerning the new scenario of the form, I truly wouldn't know but for the anchor the above works.

Answer 2

For the anchor problem: To comply with XHTML Strict Doctype, you need to use JavaScript to accomplish this.

$('.your_link').click(function(evt) {
    evt.preventDefault();
    window.top.location.href = $(evt.target).attr('href');
});

But if Strict Doctypes don't matter, you can just use the target attribute

<a target="_top" href="...">...</a>

---

For the form problem: If you don't care about the Strict Doctype, then you can use the target attribute on the form element like so

<form target="_top" action="...">...</form>

But if you do care, then you'll have to get tricky. You will need to submit the form with AJAX. On a success, replace the html of top with the response.