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.

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. — Ron Klein
– Ron Klein, Commented Oct 10, 2012 at 19:33

Amr · Accepted Answer · 2020-12-27 17:04:20Z

645

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.

edited Dec 27, 2020 at 17:04

Amr

4508 silver badges23 bronze badges

answered Jul 7, 2010 at 8:41

MIP

6,6441 gold badge20 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Brian McAuliffe Over a year ago

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.

Bjarte Aune Olsen Over a year ago

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.

Parris Over a year ago

@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 -_-.

Zhaph - Ben Duguid Over a year ago

@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...

Marcus Harrison Over a year ago

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.

|

Ali · Accepted Answer · 2009-02-24 11:31:02Z

159

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

answered Feb 24, 2009 at 11:31

Ali

268k270 gold badges593 silver badges788 bronze badges

3 Comments

Michael come lately Over a year ago

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.

NOCARRIER Over a year ago

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.

Anil kumar Over a year ago

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

jdphenix · Accepted Answer · 2014-03-20 05:09:55Z

64

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

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

edited Mar 20, 2014 at 5:09

jdphenix

15.5k5 gold badges46 silver badges74 bronze badges

answered Feb 24, 2009 at 6:26

Luca Matteis

29.3k22 gold badges116 silver badges172 bronze badges

6 Comments

Muhammad Ummar Over a year ago

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

Deltax76 Over a year ago

@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

Parris Over a year ago

@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.

Max Williams Over a year ago

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

mjj1409 Over a year ago

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;

|

rDroid · Accepted Answer · 2014-11-25 12:51:13Z

23

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

answered Nov 25, 2014 at 12:51

rDroid

4,9454 gold badges28 silver badges30 bronze badges

2 Comments

flyingL123 Over a year ago

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

rDroid Over a year ago

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

jdphenix · Accepted Answer · 2014-03-20 05:10:00Z

17

or an alternative is the following (using document object)

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

edited Mar 20, 2014 at 5:10

jdphenix

15.5k5 gold badges46 silver badges74 bronze badges

answered Feb 24, 2009 at 10:19

Real Red.

5,0698 gold badges34 silver badges44 bronze badges

2 Comments

Kijewski Over a year ago

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

Kamlesh Over a year ago

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

Raymond B · Accepted Answer · 2014-10-23 21:39:40Z

11

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

answered Oct 23, 2014 at 21:39

Raymond B

1431 silver badge7 bronze badges

1 Comment

gitaarik Over a year ago

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

haris · Accepted Answer · 2012-07-06 10:50:25Z

4

This will solve the misery.

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

answered Jul 6, 2012 at 10:50

haris

3,8751 gold badge27 silver badges28 bronze badges

Comments

Tom Burris · Accepted Answer · 2016-03-26 05:23:33Z

4

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.

answered Mar 26, 2016 at 5:23

Tom Burris

3902 silver badges19 bronze badges

Comments

Boris Adamyan · Accepted Answer · 2020-11-02 14:21:53Z

2

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>

answered Nov 2, 2020 at 14:21

Boris Adamyan

3782 silver badges15 bronze badges

Comments

Kottakji · Accepted Answer · 2012-02-08 13:17:32Z

1

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

answered Feb 8, 2012 at 13:17

Kottakji

1231 silver badge12 bronze badges

Comments

Chirag Gohel · Accepted Answer · 2012-10-31 06:08:07Z

0

Try using

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

answered Oct 31, 2012 at 6:08

Chirag Gohel

1851 gold badge3 silver badges13 bronze badges

2 Comments

shasi kanth Over a year ago

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

grilly Over a year ago

or further simplified: parent.location = 'url'

John Sheedy · Accepted Answer · 2013-11-08 04:58:51Z

0

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

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

answered Nov 8, 2013 at 4:58

John Sheedy

2871 gold badge8 silver badges27 bronze badges

1 Comment

Michael come lately Over a year ago

Duplicate of this answer from almost 5 years earlier.

Faizal · Accepted Answer · 2019-05-16 11:39:51Z

-3

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

Demo url :

answered May 16, 2019 at 11:39

Faizal

51 bronze badge

1 Comment

YesThatIsMyName Over a year ago

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

Sahil Mittal · Accepted Answer · 2013-08-27 20:27:35Z

-11

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

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

edited Aug 27, 2013 at 20:27

Sahil Mittal

20.7k12 gold badges68 silver badges91 bronze badges

answered Aug 27, 2013 at 19:56

mohamed moren3

1

Collectives™ on Stack Overflow

Redirect parent window from an iframe action

14 Answers 14

11 Comments

3 Comments

6 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

11 Comments

3 Comments

6 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related