检测点击里面的IFrame使用可见DIV(Detecting Click Inside IFrame

我通过这个帖子去了。检测点击进入使用JavaScript的iFrame

不过，我仍然看到人们做了类似的东西。请告诉我，我该怎么做。

一位开发商告诉我：

你可以把一个透明DIV在IFRAME的顶部。您大小DIV比IFRAME相同大小或更大。而具有较高的z-index CSS属性。
然后当你点击IFRAME中，DIV接收事件。
但是，随着世界是不完美的，现在你失去单击IFRAME里的能力。

但我不div的这么好，希望学习如何做到这一点。谢谢

PS它是关于交叉域或外国人域Iframing。

Answer 1:

如果我明白你问什么在这里：

的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:

我认为，一个透明的股利将无法正常工作，因为它会抓住所有点击事件，并没有蔓延下来的iframe中。

所以我知道的唯一的解决方法来追踪点击的I帧被使用模糊事件。您可以使用iframeTracker jQuery插件可以轻松地做到这一点：

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