Map in an iFrame - open hyperlink from infoWindow in the calling page

Question

I've got a Google Map being served inside an iFrame on a page (eg xxx.com/PageWithMap.html)

The code for the Google map sits on another domain (eg yyy.com/MapCode.html)

So it looks like this on xxx.com/PageWithMap.html:

<iframe src="yyy.com/MapCode.html"></iframe>

The markers in the map show an infoWindow which contains a hyperlink to a new page on the first site (eg <a href="xxx.com/photo1.html">photo link</a>)

How can I force the hyperlink to change the first page? That is, xxx.com/PageWithMap.html should navigate to xxx.com/photo1.html

I'm finding that xxx.com/photo1.html opens inside the iFrame on xxx.com/PageWithMap.html if I simply click the hyperlink.

Searching on StackOverflow suggests using window.top.location.href or target="_parent" or target="_top" but I can't get it to work. Is there an added complication since the hyperlink is within a Google Map infoWindow?

Let me know if the above description isn't clear - unfortunately I can't share the actual site yet but I may be able to make a mockup if necessary.

Thanks

Answer 1

This problem is quite popular and the article referenced below provides a great explanation as to why you can't (and shouldn't) do cross-site scripting ever. It also shows how to circumvent in a legal and safe way the problem:

http://softwareas.com/cross-domain-communication-with-iframes

Answer 2

Here is a not tested proposition :

window.opener.parent.location= "xxx.com/photo1.html"

If it still does not work, could you please provide an online sample.

By the way, this question could also go on SO or ProWebmasters since it's pure javascript.

Answer 3

I believe that an iframe can't manipulate its parent document due to security reasons. You will have to use Google Maps API in order to include the map as a part of your site, instead of an iframe.

EDIT: looks like I'm wrong. I did a quick test, a link with target="_parent" inside of an iframe loaded in a parent document.