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 developer told me:

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.

But I am not so good with div's and looking to learn how to do this. Thanks

P.S. It is about Cross Domain or Alien Domain Iframing.

Answer 1

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 2

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/

Answer 3

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