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

Answer 1

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>

Answer 2

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

Answer 3

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;
}

Answer 4

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>