Can events fired from an iframe be handled by elements in its parent?
Solution 1
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'); });
Solution 2
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).
Solution 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
allyourcode
Updated on August 11, 2020Comments
-
allyourcode almost 4 years
Suppose I have a page located at
www.example.com/foo
, and it contains an<iframe>
withsrc="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
?