Detecting Click Inside IFrame Using Invisible div

Question

I went through this post. Detect Click into Iframe using JavaScript

But still, I see people have done similar stuff. Please tell me how do I do this.

One dev

Answer 1

If I understand what you are asking here:

jsFiddle

// PLACE OVERLAY OVER EACH IFRAME
var W=0, H=0, X=0, Y=0;
$(".iframe").each(function(i,el){
   W = $(el).width();
   H = $(el).height();
   X = $(el).position().left;
   Y = $(el).position().top;
   $(this).after('<div class="overlay" />');
    $(this).next('.overlay').css({
        width: W,
        height: H,
        left: X,
        top: Y        
    });
});

// TRACK MOUSE POSITIONS (the overlay will prevent clicks on iframe page)
var mx = 0, my = 0;
$('.overlay').on('mousemove click',function(e){
    mx = e.clientX - $(this).position().left;
    my = e.clientY - $(this).position().top;

    if(e.type==='click'){
        alert('clicked at: X='+mx+' Y='+my)
    }        
});

Answer 2

I think a transparent div will not work, because it will catch all click events, and not spread it down to the iframe.

So the only workaround I know to track click on iframes is using the blur event. You can use the iframeTracker jQuery Plugin to do this easily :

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

Answer 3

Check out Jquery's .live method.

It can attach an event handler to a selector now and in the future, such as when content is loaded into a div.

http://api.jquery.com/live/