Capture Click on Div Surrounding an Iframe

Capture click on div surrounding an iframe

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.

Detect Click into Iframe using JavaScript

Is something like this possible?

No. All you can do is detect the mouse going into the iframe, and potentially (though not reliably) when it comes back out (ie. trying to work out the difference between the pointer passing over the ad on its way somewhere else versus lingering on the ad).

I imagine a scenario where there is an invisible div on top of the iframe and the the div will just then pass the click event to the iframe.

Nope, there is no way to fake a click event.

By catching the mousedown you'd prevent the original click from getting to the iframe. If you could determine when the mouse button was about to be pressed you could try to get the invisible div out of the way so that the click would go through... but there is also no event that fires just before a mousedown.

You could try to guess, for example by looking to see if the pointer has come to rest, guessing a click might be about to come. But it's totally unreliable, and if you fail you've just lost yourself a click-through.

capture click event on iframe

It is completely normal; events bubble inside the dom tree, the iframe has it's own dom tree and thus wont bubble the event outside of it.

How does your setup look like?
If you control the content inside the iframe you could use the post message API to communicate between the iframe and parent, check:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

If you do not control it then probably you could detect a blur event on the parent window, rather than the click event on the iframe.

Hope this helps

Detect click outside div doesn't work if click target is iframe

How about binding event to iframes' document.

iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);

iframesArray.forEach(function(frame) {
  frame.contentWindow.document.addEventListener('click', function() {
    inc();
  }, true);
});

---

Related Topics