Clash Royale CLAN TAG#URR8PPP

Can events fired from an iframe be handled by elements in its parent?

Suppose I have a page located at www.example.com/foo, and it contains an <iframe> with src="http://www.example.com/bar". I want to be able to fire an event from /bar and have it be heard by /foo. Using the Prototype library, I've tried doing the following without success:

www.example.com/foo

<iframe>

src="http://www.example.com/bar"

/bar

/foo

Element.fire(parent, 'ns:frob');

When I do this, in Firefox 3.5, I get the following error:

Node cannot be used in a document other than the one in which it was created" code: "4
Line 0

Not sure if that's related to my problem. Is there some security mechanism that's preventing scripts in /bar from kicking off events in /foo?

/bar

/foo

4 Answers
4

I haven't tested this cross-browser yet, but it works in FF.

In the iFrame you can fire on the element parent.document:

Event.observe(window, 'load', function()
parent.document.fire('custom:event');
);


and in the parent frame you can catch it with:

document.observe('custom:event', function(event) alert('gotcha'); );


Events can be handled by a function defined the parent window if the iframe is a page from the same domain (see MDC's article on Same Origin Policy); however, events will not bubble up from the iframe to the parent page (at least not in my tests).

iframe

iframe

rather then catch an event on the main page, you can catch the event at the iframe, and call a function on the main page.

<-- main page -->
function catchIt()

// code here



<-- iframe page -->

function doIt()

top.catchIt();


<a onclick="doIt();">test</a>


i think it would work but didnt test it

This should work as expected, to do what you need:

index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function()
$(document).on('eventhandler', function()
alert('event was fired');
);
);
</script>


iframe.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function()
parent.$(parent.document).trigger('eventhandler');
);
</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.