383

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.

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
Ali
  • 261,656
  • 265
  • 575
  • 769
  • 5
    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 Oct 10 '12 at 19:33

14 Answers14

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

Amr
  • 411
  • 6
  • 21
MIP
  • 6,416
  • 1
  • 17
  • 8
  • 3
    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. – Brian McAuliffe Sep 25 '14 at 10:54
  • 3
    In Chrome, @Parris jsfiddle throws this 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. – Bjarte Aune Olsen Mar 18 '15 at 09:09
  • 1
    @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 -_-. – Parris Mar 18 '15 at 09:12
  • 4
    @BjarteAuneOlsen - I believe this is because the Iframes on JSFiddle are deliberately [sandboxed](http://caniuse.com/#feat=iframe-sandbox) 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... – Zhaph - Ben Duguid May 13 '15 at 12:33
  • 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.` – xhg Mar 20 '17 at 07:10
  • 19
    The errors people are encountering here are because of a new HTML5 attribute for iframes called, "`sandbox`" - https://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. – Marcus Harrison Jul 03 '17 at 16:03
  • 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.` – joseantgv Sep 14 '18 at 09:30
  • @joseantgv The OP clearly says navigation is intended to be though _click_ on a hyperlink. Click is a user gesture. – Alireza Jan 03 '19 at 22:16
  • @Alireza `but is neither same-origin with its target` – joseantgv Jan 07 '19 at 08:08
  • @joseantgv It's not an issue as long as user interacts with the frame. – Alireza Jan 08 '19 at 04:07
  • Both solution not worked for me. Chrome in windows 10 says 'Redirect blocked'. If user does not allow, this solution will not work. – Kamlesh Jan 02 '21 at 07:33
155

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

Ali
  • 261,656
  • 265
  • 575
  • 769
  • 10
    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. – Michael Jan 30 '13 at 15:59
  • 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. – Shawn J. Molloy Jul 26 '14 at 17:25
  • I need to redirect parent iframe from child iframe. Tried _parent but it's not working in firefox. – Anil kumar Dec 15 '20 at 09:02
63
window.top.location.href = "http://example.com";

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

jdphenix
  • 15,022
  • 3
  • 41
  • 74
Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
  • 9
    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 – Muhammad Ummar Jun 05 '10 at 15:40
  • 4
    @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 – Delta76 Apr 04 '12 at 03:11
  • 8
    @Ummar that isn't true, http://jsfiddle.net/ppkzS/ for proof. You can change window.top.location.href. You just can't read it. Works in chrome. – Parris Aug 06 '13 at 06:18
  • Great jsfiddle @Parris, that settles it for me :) – Max Williams Aug 21 '13 at 13:46
  • 3
    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**; – mjj1409 Jul 26 '14 at 11:56
  • This answer came way before the accepted answer, why doesn't it have the accept and upvotes? – Ed Bayiates Dec 02 '15 at 21:37
20

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

rDroid
  • 4,875
  • 3
  • 25
  • 30
16

or an alternative is the following (using document object)

parent.document.location.href = "http://example.com";
jdphenix
  • 15,022
  • 3
  • 41
  • 74
Real Red.
  • 4,991
  • 8
  • 32
  • 44
  • 5
    That solution is Firefox specific. One should just use `parent.location.href = ...`. https://developer.mozilla.org/en/document.location – Kijewski Jul 12 '12 at 23:42
  • Solution not worked for me. Chrome in windows 10 says 'Redirect blocked'. If user does not allow, this solution will not work – Kamlesh Jan 02 '21 at 07:34
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>
Raymond B
  • 143
  • 1
  • 7
  • Note that the `sandbox` attribute enables an extra set of restrictions for the content in the ` – gitaarik Apr 18 '19 at 09:06
4

This will solve the misery.

<script>parent.location='http://google.com';</script>
haris
  • 3,775
  • 1
  • 25
  • 28
3

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.

Tom Burris
  • 380
  • 2
  • 19
3

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>
Boris Adamyan
  • 350
  • 2
  • 14
1

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

Joris Kok
  • 113
  • 12
0

Try using

window.parent.window.location.href = 'http://google.com'
Chirag Gohel
  • 185
  • 1
  • 3
  • 13
0
window.top.location.href = 'index.html';

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

John Sheedy
  • 287
  • 1
  • 8
  • 26
  • Duplicate of [this answer](https://stackoverflow.com/a/580675/241211) from almost 5 years earlier. – Michael Feb 27 '18 at 16:55
-3

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

Demo url :

Faizal
  • 5
  • 1
-9

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

window.parent.document.getElementById("content").src = "content.aspx?id=12";
Sahil Mittal
  • 20,697
  • 12
  • 65
  • 90