detect click inside iframe

Question

i wanna detect click INSIDE iframe not onclick on iframe itself i tried onclick event u must click on iframe itself to trigger function i even tried addeventlistener to window or document nothing work as if the iframe isn't there the function never triger when i click inside iframe :( plz help

Answer 1

For security reasons, you are not supposed to be able to track activities in an IFRAME that goes to a different website. If you have an IFRAME on your own site that goes to another page on your own site, then you solve this by adding the click tracking directly in the code that the IFRAME runs.

If this is impossible you can consider running your own customized proxy server for the IFRAME:ed webserver, and that way you'll be able again to add your own click tracking. See Mousehole by _why for code examples.

Answer 2

You could put a transparent DIV on top of the IFRAME.
You size that DIV to the same size or bigger than the IFRAME.
And with a higher z-index CSS property.

Then when you click on the IFRAME, the DIV receives the event.

But as the world is not perfect, now you lost the ability to click inside the IFRAME.

Answer 3

Only works on iframes on the same domain:

$('body', $('select-your-iframe-here').contents()).click(function(event) {
  console.log('Clicked! ' + event.pageX + ' - ' + event.pageY);
});