0

I need to hide a div which is on an iframe on iframes child click.

<a href="#" class="share">Share +</a> -> this is the child I want to do some functions on click.

I used this answers JQuery code but it doesn't seem to work.

HTML

<iframe id="map_frame" frameborder="0" src="http://a.tiles.mapbox.com/v3/vucko.map-1p4ens5h.html#17/45.80611110816038/15.924351969962727"></iframe>
<div>on "share +" click this div must hide so the share box goes above the div</div>

JQuery

$('#map_frame').contents().find('.share').click(function() {
    alert('click');
});

Working JSFiddle.

How to achieve this ?

Community
  • 1
  • 1
Vucko
  • 20,555
  • 10
  • 56
  • 107

1 Answers1

0

This cannot be done since the iframe document and the root document are from different domains. Browsers will not allow this, throwing a security exception.

For example, in chrome, this results in:

Unsafe JavaScript attempt to access frame with URL http://a.tiles.mapbox.com/v3/vucko.map-1p4ens5h.html#17/45.80611110816038/15.924351969962727 from frame with URL http://fiddle.jshell.net/94Dge/1/show/. Domains, protocols and ports must match.

techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • Yes, I saw the result. Is there some workaround to achieve my goal ? – Vucko Mar 29 '13 at 12:00
  • The only solution in this particular case is that you server your application form `a.tiles.mapbox.com` or server the map from where your application's domain. – techfoobar Mar 29 '13 at 12:01
  • It's intresting that on my live page doesn't display any error. But it still doesn't work. EDIT: the error is still here. – Vucko Mar 29 '13 at 12:19