How would I go about detecting onclick events external to a particular iframe?

Question

I have a page that has a bunch of different iframes (A, B, C, D) - all of which are fully visible at all times. Together, they make up the various portions of my application's UI. One of these iframes, iframe D - houses another, smaller iframe (iframe X) that is sometimes made visible by a user action. It should automatically disappear whenever the user clicks outside of it. I can easily handle this from within iframe D by putting an onclick on the body. If I actually detect a click in iframe D's body - that means they aren't clicking in iframe X, so I can hide iframe X via CSS. No problem.

The problem is the other iframes - A, B, and C. If a user clicks within those, I want to hide iframe X also. Currently, I have it working - but not well. For each of those iframes (A, B, C), I have code that will communicate body clicks to iframe D. I don't like this approach because iframes A, B, C all have knowledge of iframe X - there really should be no need for this, and it just adds to files I have to change to support the feature offered by iframe X. Is there any way I can handle detecting external onclick events all from within iframe D? This would leave the iframe X show/hide logic within iframe D, which makes the code much easier to move around.

If I get that onclick monitoring going - I'm also wondering if it would handle all clicks - for example, if iframe A has some onclick events set on specific elements - am I sure to also catch those clicks? I mention this because my current workaround seems to be flawed (iframes A, B, C report their body onclicks to iframe D) - certain clicks are not triggering body onclick.

Thanks in advance guys. Please keep in mind, though, that removing iframes isn't realistic at this point in the project.

Answer 1

put a YUI panel object on the outer document.

then instead of showing iframe X, show the YUI panel, with modal mode, and on the panel contents put <iframe... src=x>

when you call parent.panel.show() it will show over all frames and it's easily customaziable to allow any click outside of the panel to close it.

Answer 2

Events do not bubble past iframe boundaries because that would pose security risks. Imagine a phishing site that embedded a bank website in an iframe, and installed an onkeypress handler to log any password the user typed into the embedded frame.

Your best bet is to probably have the outer frame install body handlers as you are doing, and maybe also install onunload handlers, so it can reinstall the body handler as needed.

Yes, event handlers that cancel bubbling on a click event will hide it from a body event handler.