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

Question

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:

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 ?

Answer 1

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).

Answer 2

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

Answer 3

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

Answer 4

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>