Detecting Click Inside IFrame Using Invisible div

iframe, javascript, jquery, php

Solution

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

Problem

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.

Original source

Related problems