使用Invisible div检测Click Inside IFrame [英] Detecting Click Inside IFrame Using Invisible div

问题描述

我经历过这篇文章。
使用JavaScript检测点击进入iframe

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.

一位开发人员告诉我：

您可以将透明DIV放在IFRAME之上。您将
DIV的大小调整为与IFRAME相同或更大。并且使用更高的
z-index CSS属性。

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.

然后当您点击IFRAME时，DIV会收到该事件。

Then when you click on the IFRAME, the DIV receives the event.

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

But as the world is not perfect, now you lost the ability to click inside the IFRAME.

但我对div不太满意，并希望学习如何做到这一点。
谢谢

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

P.S。这是关于跨域或外来域Iframing。

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

推荐答案

如果我理解你在这里问的是什么：

If I understand what you are asking here:

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

这篇关于使用Invisible div检测Click Inside IFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！