php - Detecting Click Inside IFrame Using Invisible div - Stack Overflow

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.

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.

• php
• javascript
• jquery
• iframe

Share Improve this question Follow edited May 23, 2017 at 10:24 CommunityBot 111 silver badge asked Apr 19, 2012 at 10:48 Oscar KeltonOscar Kelton 10711 silver badge99 bronze badges 2

• Edited as per your advice. Thanks – Oscar Kelton Commented Apr 19, 2012 at 10:58
• No hijack, I am want to make a submit form work. As i don't have access to it. I am taking this route. I think Question here are asked for programming help and not about hijacks and scams? Right? – Oscar Kelton Commented Apr 19, 2012 at 11:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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)
    }        
});

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

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./live/