Redirect parent window from an iframe action

Question

What JavaScript do I need to use to redirect a parent window from an iframe?

I want them to click a hyperlink which, using JavaScript or any other method, would redirect the parent window to a new URL.

Footstool

The parent window, in itself, could be an IFrame, too. Since the accepted answer addresses the top window, I suggest you change your question a bit. – Blamed

Answer 1

window.top.location.href = "http://www.example.com"; 

Will redirect the top most parent Iframe.

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

Will redirect the parent iframe.

Mcgregor

I don't think same origin policy applies here. It makes sense that you should be able to break your site out of someone else's iframe. – Depress

In Chrome, @Parris jsfiddle throws this error: Unsafe JavaScript attempt to initiate navigation for frame with URL 'jsfiddle.net/ppkzS' from frame with URL 'parrisstudios.com/tests/iframe_redirect.html'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set. – Beep

@BjarteAuneOlsen interesting, might be a recent change in chrome or webkit. It was definitely working previously. It has been a couple years :). Also the answer used to state that same origin policy applied, which previously made the answer incorrect, but now makes it correct and my comment wrong -_-. – Alcahest

@BjarteAuneOlsen - I believe this is because the Iframes on JSFiddle are deliberately sandboxed so they have explicitly denied certain features (such as redirect, etc) - there's a danger that you'd use JS to navigate away from JS Fiddle and lose your work... – Thromboplastic

I tested with latest Safari (10.0.3 (12602.4.8)), I got this Console error: Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://jsfiddle.net/ppkzS/' from frame with URL 'http://www.parrisstudios.com/tests/iframe_redirect.html'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set. – Nester

The errors people are encountering here are because of a new HTML5 attribute for iframes called, "sandbox" - developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe The sandbox attribute prevents javascript taking certain actions within an iframe based on a given whitelist of allowed actions. The allow-top-navigation property is one of the actions you can enable in the whitelist, which allows this code to work. If the sandbox attribute is abscent all actions are allowed. If it is present and an empty string, all actions are denied. – Liquidator

It's not valid in some conditions from Chrome 68: The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. – Clockmaker

@Clockmaker The OP clearly says navigation is intended to be though click on a hyperlink. Click is a user gesture. – Baylor

@Baylor but is neither same-origin with its target – Clockmaker

@Clockmaker It's not an issue as long as user interacts with the frame. – Baylor

Both solution not worked for me. Chrome in windows 10 says 'Redirect blocked'. If user does not allow, this solution will not work. – Barren

Answer 2

I found that <a href="..." target="_top">link</a> works too

Footstool

While the selected answer is correct, I think this is a better answer for the question's intent. Also, it will work for the people who have JS disabled. – Vasquez

I agree this is the best solution but the OP specifically asked for javascript. On the other hand, OP specified it should be trigger via an anchor - I can't see a scenario where one would be forced to use javascript from an anchor tag to achieve the desired result, therefor the question is misleading. – Bismuthic

I need to redirect parent iframe from child iframe. Tried _parent but it's not working in firefox. – Howell

Answer 3

window.top.location.href = "http://example.com";

window.top refers to the window object of the page at the top of the frames hierarchy.

Scully

window.top.location.href property can't be updated from Iframe, it throws access denied execption. It can only be executed when you are testing on localhost – Fate

@Ummar: I would add that this works when the parent an the iframe has same domain, same port (same origin policies), it throws access denied exception when they're different, to prevent security breaches – Manslaughter

@Ummar that isn't true, jsfiddle.net/ppkzS for proof. You can change window.top.location.href. You just can't read it. Works in chrome. – Alcahest

Great jsfiddle @Parris, that settles it for me :) – Semilunar

I suspect some of the doubters may have been trying something like this within in the iframe: window.top.location.href = window.top.location.href; – Seifert

This answer came way before the accepted answer, why doesn't it have the accept and upvotes? – Buffum

Answer 4

target="_parent" worked great for me. easy and hassle free!

Sequester

These seems to work great. Are there any downsides to using this method rather than Javascript? – Virgil

not that I know of. DO share if you find out something. – Sequester

this worked perfectly – Tohubohu

Answer 5

or an alternative is the following (using document object)

parent.document.location.href = "http://example.com";

Michelinemichell

That solution is Firefox specific. One should just use parent.location.href = .... developer.mozilla.org/en/document.location – Supat

Solution not worked for me. Chrome in windows 10 says 'Redirect blocked'. If user does not allow, this solution will not work – Barren

Answer 6

@MIP is right, but with newer versions of Safari, you will need to add sandbox attribute(HTML5) to give redirect access to the iFrame. There are a few specific values that can be added with a space between them.

Reference(you will need to scroll): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Ex:

<iframe sandbox="allow-top-navigation" src="http://google.com/"></iframe>

Barling

Note that the sandbox attribute enables an extra set of restrictions for the content in the <iframe>. The value of the sandbox property removes particular restrictions. So watch out with using this feature. w3schools.com/tags/att_iframe_sandbox.asp – Gee

Answer 7

This will solve the misery.

<script>parent.location='http://google.com';</script>

Choose

Answer 8

If you'd like to redirect to another domain without the user having to do anything you can use a link with the property:

target="_parent"

as said previously, and then use:

document.getElementById('link').click();

to have it automatically redirect.

Example:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<a id="link" target="_parent" href="outsideDomain.html"></a>

<script type="text/javascript">
    document.getElementById('link').click();
</script>

</body>

</html>

Note: The javascript click() command must come after you declare the link.

Turkey

Answer 9

For current page - window.location.href = "Your url here";

For Parent page - window.top.location.href = "Your url here";

From HTML

<a href="http://someurl" target="_top">link</a>

Rissole

Answer 10

It is possible to redirect from an iframe, but not to get information from the parent.

Criseldacrisey

Answer 11

Try using

window.parent.window.location.href = 'http://google.com'

Aggregation

Simple version: parent.window.location = '<URL>'; – Oleo

or further simplified: parent.location = 'url' – York

Answer 12

window.top.location.href = 'index.html';

This will redirect the main window to the index page. Thanks

Arable

Duplicate of this answer from almost 5 years earlier. – Vasquez

Answer 13

We have to use window.top.location.href to redirect parent window from an iframe action.

Demo url :

Sixtynine

Who is we? :) Could you write the essential parts from the url into the answer please? URLs/links may change or get deleted. – Beer

Answer 14

Redirect iframe in parent window by iframe in the same parent:

window.parent.document.getElementById("content").src = "content.aspx?id=12";

Pepper