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`?

Accepted Answer

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?

Solution

Problem