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
-
1Did you try putting the listener on the BODY tag of the content inside the iframe? – Zoidberg Mar 18 '10 at 18:57
-
It's an external site in an iframe; I can not add anything to it... – santa Sep 24 '12 at 12:21
-
It is possible, see crossbrowser solution: http://stackoverflow.com/a/32138108/1064513 – Dmitry Kochin Aug 21 '15 at 10:35
5 Answers
Only works on iframes on the same domain:
$('body', $('select-your-iframe-here').contents()).click(function(event) {
console.log('Clicked! ' + event.pageX + ' - ' + event.pageY);
});
-
Cross domain and crossbrowser solution: http://stackoverflow.com/a/32138108/1064513 – Dmitry Kochin Aug 21 '15 at 10:35
Web browsers won't let you access an iframe's content for security reasons (except if the iframe is on the same domain as the parent page).
But there is a workaround, using the blur event which is fired when an iframe is clicked (because while the iframe gets the focus, the parent page loses it).
I've wrote a jQuery plugin that uses this tip to detect clicks on iframe, it's available here : https://github.com/finalclap/iframeTracker-jquery. You can read the tutorial at http://www.finalclap.com/tuto/track-iframe-click-jquery-87/ (it's in French).
To use it, you just have to match the iframe element(s) you want to track, supplying a callback function :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});

- 3,274
- 2
- 26
- 28
-
Is there any way to detect all the clicks inside theIFrame and not only the first one ? – Gab Oct 03 '14 at 10:12
-
I don't think so, because of the same origin policy : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy – Vince Oct 06 '14 at 08:04
Try this
$(window).click( function(e){
$('#result').text('Clicked inside document');
});
$(window).blur( function(e){
$('#result').text('Clicked out of the window or on the iframe');
});
test http://jsfiddle.net/4vBRe/
To detect only the click on iframe then use mouseover event then blur

- 1,067
- 13
- 30
-
2This works ... i suppose not in every situation but it's a handy trick – byronyasgur Apr 05 '13 at 02:59
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.

- 2,530
- 24
- 30
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.

- 24,812
- 9
- 57
- 70
-
If someone did this and captured the click on the div, would there be a way to propogate it (really it would be simulating a click on the same location in the underlying iframe...)? – Benj Aug 13 '10 at 11:18
-
The div does not receive the click event in this case. No click detection is possible over or in the iframe if content is from different domain. – Andy N Mar 17 '11 at 18:06