detect click inside iframe

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

Only works on iframes on the same domain:

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

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)
        }
    });
});

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

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.

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.