php - 使用不可见的 div 检测 IFrame 内的点击

Question

我浏览了这篇文章。 Detect Click into Iframe using JavaScript

但是，我仍然看到有人做过类似的事情。请告诉我该怎么做。

一位开发者告诉我:

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.

但我对 div 不是很好，想学习如何做。 谢谢

附言它是关于跨域或外域 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)
    }        
});