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
Solution 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).
Solution 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'); });
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 -->functioncatchIt()
{
// code here
}
<-- iframe page -->functiondoIt()
{
top.catchIt();
}
<a onclick="doIt();">test</a>
i think it would work but didnt test it
Solution 4:
This should work as expected, to do what you need:
index.html:
<scriptsrc="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:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
$(function(){
parent.$(parent.document).trigger('eventhandler');
});
</script>
Post a Comment for "Can Events Fired From An Iframe Be Handled By Elements In Its Parent?"