使用 Invisible div 检测 IFrame 内的点击

我浏览了这篇文章.使用 JavaScript 检测点击进入 Iframe

但是，我仍然看到人们做了类似的事情.请告诉我该怎么做.

一位开发者告诉我:

<块引用>

您可以在 IFRAME 顶部放置一个透明的 DIV.你的尺寸DIV 大小与 IFRAME 相同或更大.并且以更高的z-index CSS 属性.

然后当您单击 IFRAME 时，DIV 会收到该事件.

但由于世界并不完美，现在你失去了点击的能力在 IFRAME 内.

但我对 div 不太擅长，并希望学习如何做到这一点.谢谢

附言它是关于跨域或异域 Iframeing.

解决方案

如果我明白你在这里问的是什么:

jsFiddle

//在每个 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('
');$(this).next('.overlay').css({宽度:W，高度:H，左:X，顶部:Y});});//跟踪鼠标位置(覆盖将阻止点击 iframe 页面)无功 mx = 0，我的 = 0；$('.overlay').on('mousemove click',function(e){mx = e.clientX - $(this).position().left;my = e.clientY - $(this).position().top;if(e.type==='click'){alert('点击:X='+mx+' Y='+my)}});

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.

解决方案

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