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

trigger parent click event when child is clicked
how to stop event bubbling in javascript
when to use event capturing
event bubbling w3schools
javascript capture all events
iframe event listener
iframe events
iframe click event javascript

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?

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

Can events fired from an iframe be handled by elements in its parent?, I was assigned a task to do something challenging on this element. to open a URL on click of the orange button, BUT because the button was inside the iframe, that couldn't be managed easily. The solution was to use custom events. In its most basic case, an event listener deals with events fired from a single element: If this sounds new to you, take a few moments to read the Events in JavaScript tutorial first. As you build more complicated things, the "one event handler for one element" mapping starts to show its limitation.

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

Cross-Domain Iframe-parent communication - Farzad YZ, A handler on a parent element can always get the details about But any handler may decide that the event has been fully processed and stop  Something else a normal Angular event binding can handle are events that bubble up to a parent component from a child component. If a DOM event is fired in the child, the parent component will hear

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

Bubbling and capturing, A document in an iframe can obtain a reference to the iframe element containing it through the frameElement property of the window object.[1] The frameElement  Another option: you can include an onload handler in the iframed document itself. All browsers in current use support all three approaches. Note: Onload events are fired on iframe elements before they are fired on the containing document. See iframe onload in use in Access to Iframe and Contents.

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>

JavaScript Interaction between Iframe and Parent, the iframe has an attribute, onload, that represents an event that is triggered when the In the example, the function LoadedContent is called, which will generate a pop-up box HTML events can be associated with any HTML element. The idea is to pass the HTML event from the child to the parent, and to continue  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).

Ajax Patterns and Best Practices, Thus, it will be isolated from the JavaScript and CSS of the parent. the iframe and the parent (more on how to do so later in this article), I managed to design a Because an iframe is a document, you can use most global event handlers. and all the elements in the DOM tree have fired their load event. First we assign an anonymous function to the iframe element's onload event. Then we get a reference to the form and assign onclick handlers to its buttons. The text box below the buttons is used to display results. Code comments provide more information. More examples of cross-document referencing are listed in the upper right.

The ultimate guide to iframes, The load event is fired when the whole page has loaded, including Log a message when the page is fully loaded: 'load' events are fired at many elements too. the specification that refer to things that can "delays the load event". ontransitionend · onunhandledrejection · onunload · onuserproximity  In jQuery, I'm a bit confused as to how to select a parent element to a child if I attached a click event on the parent but also want a click event on a child within. Let's say I have a the

Window: load event, Given a jQuery object that represents a set of DOM elements, the .contents() method The .contents() method can also be used to get the content document of an iframe, It makes things like HTML document traversal and manipulation, event handling, animation, Selects all elements that are the first child of their parent. So I have to listen to the onmousedown,onclick events on parent document from a iframe and have to display the selected element's attributes like(tag name, id, name etc). Is there a way to listen the mouse events (infact all the events) from the iframe.

Comments
  • Are foo and bar in the same domain?
  • @Annie the scheme and domain portions of the URL's are the same.
  • Ah. I think the key here is that you used parent.document. The difference is that parent is a Window object vs. parent.document is an Element. Thanks!
  • Thanks alot, Justin. Can you (or someone else) provide a link about events not bubbling up from an iframe?
  • From the specs: "propagation will continue up to and including the Document." It is important to understand that an iframe has an own document element. Again, citing the specs: "the embedded document remains independent of the main document"
  • Specifications are rarely the same as implementations :(
  • This is unfortunate, but I understand the reason. It just means whomever is in control of the other domain should provide hooks to pass events through (assuming you're using a 3rd party library like me).
  • Don't you mean parent.catchIt, not top.catchIt?
  • when you have frames inside other frames, top means the parent os all frames.