Capture click on div surrounding an iframe

Question

How can I capture a click or mousedown event on a div surrounding an iframe. I've tried attaching the function to click event on the div but since the iframe never bubbles the event up to the surrounding div the function is never called. Is there a way I can capture the event on the div and then propagate it to the iframe for default action?

Madelinemadella

Answer 1

If the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.

Furthermore, if the iframe contains a page that does not belong to the same domain as the iframe parent, any interaction is prohibited (re. same origin policy).

When the same origin policy is met, there are a few things you can do, you could call a method in the iframe parent context:

top.parentFunction();

So in the iframe you add an event listener that delegates to the iframe parent (accessible with the top reference.

Propagating events is a lot more complicated, so I'm simply going to refer to Diego Perini's NWEvents library. I believe his event system to be one of the better ones out there and he's particular on iframe interaction.

I certainly would not start writing your own code to achieve this, this can easily be a year long project if you want to do it properly and even then will be inferior to Diego's work.

Graeae

Calling functions on parent or ancestor frames is not allowed (nowadays), so unfortunately this won't work (any more). As a side note, there are window.parent (parent frame) and window.top (always the "topmost" frame, i.e. the page the user opened in the browser). – Ragen

Answer 2

There's no "good" way to do it, but if you really need to detect a click on an Iframe, you can kind-of do it in the latest browsers.

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

This script will check every 200ms whether the user is in the Iframe. Of course, they may not have clicked on the Iframe to get there, but I'm afraid this is the best you can do without @BGerrissen's solution.

It will detect the first 'click' only, unless you click out again. It only works in really modern browsers.

Kanarese

Worked like a charm for iPhone – Solanum

I was trying to detect click on a social share button (which is iframe), made a tiny angular directive out of this method and wow, it worked perfectly! Thanks! – Womb

Answer 3

You can use a library like porthole to pass messages between parent and iframe, even across domains. Using this wouldn't exactly propagate the event (you won't be able to get the event object), but you can create your own event in the form of a simple message, and then handle it in the parent as a click.

Here's their example

However, I've used Brendon's answer as it's simpler works for my current need.

Slattery

Answer 4

If you land here because you need to track a click on a PayPal button (like me), and you have access to the JavaScript SDK, you can listen to the click by adding the onClick callback in the initialization.

Example:

paypal.Buttons({
  onClick() {
    // here you can track the click 
  }
}).render('#paypal-container');

Link to the docs: https://developer.paypal.com/sdk/js/reference/#link-oninitonclick.

Revocation

In a similar way, if it's a click on the zendesk widget that you need to intercept, the code is this one: zE('webWidget:on', 'open', function() { console.log('The widget has been opened!'); });, from developer.zendesk.com/api-reference/widget/core/#on-open – Revocation