Change Parent url from iframe

Question

Need help with a simple problem! which has the following criteria:

1) click on images link in iframe changes Parent page, click on another iframe image link changes Parent to another page (see below).

It may sound simple but I'm being googled it for days now and looked over many forums. Code can be in html css or js, but please keep any answers simple as possible and post a full working example to work as I'm new to coding or recode the test site: http://www.howiepotter.com/parent.html

enter image description here

can you please post the code you're currently using, in addition to the link you provided? — jackwanders, Jun 26 '12 at 13:06
You need to name the parent and use the `target` attribute. Also spend some time reading the documentation. Or even just searching in Google. — Ben, Jun 26 '12 at 13:09
possible duplicate of [How do I change the URL of the "parent" frame?](http://stackoverflow.com/questions/4361479/how-do-i-change-the-url-of-the-parent-frame) — Ben, Jun 26 '12 at 13:10
If you are using JavaScript for this, you can use `window.open("the-new-url-goes-here", "_top")`. — zenw0lf, Apr 22 '20 at 14:24

biziclop · Answer 1 · 2012-06-26T13:15:52.863

89

http://reference.sitepoint.com/html/a/target

"_top"

loads content in the top-level frameset (in effect, the whole browser window), no matter how many nested levels down the current frame is located

<a href="page" target="_top">Replace parent url!</a>

edited Jun 26 '12 at 13:15

answered Jun 26 '12 at 13:10

biziclop

14,466
3
49
65

6

while the question was for JS, this is MUCH easier for my current needs. – Andrew Burns Dec 27 '12 at 22:01
2

could even use target="_parent" – iniravpatel Dec 03 '16 at 06:11
What if I deleted this answer of mine? – biziclop Jan 16 '18 at 10:22
why would you @biziclop ? – Pixelomo May 22 '19 at 01:27
2

@Pixelomo: too much upvote for a too simple answer. :) – biziclop May 22 '19 at 10:41
and how can I stop it? – Dipanshu Mahla May 22 '20 at 14:17
@DipanshuMahla: Stop what? – biziclop May 22 '20 at 19:45
How can we stop iframe from doing that? @biziclop – Dipanshu Mahla May 23 '20 at 06:32
@DipanshuMahla: We can't, and I'm glad we can't. – biziclop May 25 '20 at 08:22

score 41 · Answer 2 · answered Jun 26 '12 at 13:07

41

Change your link from this:

<a href="link-here.html">

To this:

<a href="#" onclick="top.window.location.href='yourURL';">

If you want, you could just put the onclick handler on the image instead and get rid of the anchor.

Note that this is not the correct place to have javascript (handlers should be bound from a .js file, not in markup), but i get the feeling you are looking for a surgical answer and don't care much for best practices.

edit: as Victor Nicollet pointed out, this will throw a security exception if your iframe and parent page do not share domains. see http://en.wikipedia.org/wiki/Same_origin_policy

answered Jun 26 '12 at 13:07

jbabey

45,965
12
71
94

8

This. Also, keep in mind that the frame and the page containing the frame must come from the same domain for this to work. – Victor Nicollet Jun 26 '12 at 13:09
Note that _Same origin policy_ is not a blocker as long as the `iframe` is sanboxed correctly, and/or the navigation is triggered by a user gesture. Try this: https://real-archer.glitch.me – Alireza Jan 03 '19 at 23:05
3

@Alireza what do you mean by "sandboxed correctly"? – Elise May 20 '19 at 13:26

score 12 · Answer 3 · answered Jun 25 '20 at 13:58

12

In my case I used the following

if (window.self !== window.top) { // checking if it is an iframe
  window.parent.location.href = websiteUrl;
} else {
  window.location.href = websiteUrl;
}

answered Jun 25 '20 at 13:58

Artem Luzhanovskyi

1,767
1
11
8

score 0 · Answer 4 · answered May 22 '19 at 01:27

In case @biziclop decides to delete his answer as he seems to be threatening to do in the comments, here's his answer again which is very useful:

http://reference.sitepoint.com/html/a/target

"_top"

loads content in the top-level frameset (in effect, the whole browser window), no matter how many nested levels down the current frame is located

<a href="page" target="_top">Replace parent url!</a>

Change Parent url from iframe

4 Answers4

Linked