60

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

4
  • can you please post the code you're currently using, in addition to the link you provided? Jun 26, 2012 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, 2012 at 13:09
  • 1
    possible duplicate of How do I change the URL of the "parent" frame?
    – Ben
    Jun 26, 2012 at 13:10
  • If you are using JavaScript for this, you can use window.open("the-new-url-goes-here", "_top").
    – zenw0lf
    Apr 22, 2020 at 14:24

4 Answers 4

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>
9
  • 6
    while the question was for JS, this is MUCH easier for my current needs. Dec 27, 2012 at 22:01
  • 2
    could even use target="_parent" Dec 3, 2016 at 6:11
  • What if I deleted this answer of mine?
    – biziclop
    Jan 16, 2018 at 10:22
  • why would you @biziclop ?
    – Pixelomo
    May 22, 2019 at 1:27
  • 2
    @Pixelomo: too much upvote for a too simple answer. :)
    – biziclop
    May 22, 2019 at 10:41
42

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

3
  • 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. Jun 26, 2012 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: real-archer.glitch.me
    – Alireza
    Jan 3, 2019 at 23:05
  • 3
    @Alireza what do you mean by "sandboxed correctly"?
    – Elise
    May 20, 2019 at 13:26
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;
}
0
0

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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.