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

Question

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

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

一位开发人员告诉我：

您可以在 IFRAME 顶部放置一个透明的 DIV。您将该 DIV 调整为与 IFRAME 相同或更大的大小。并具有更高的 z-index CSS 属性。

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

但是由于世界并不完美，现在您失去了在 IFRAME 内单击的能力。

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

PS 它是关于跨域或外星域 iframe。

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

我认为透明 div 不起作用，因为它会捕获所有点击事件，而不是将其传播到 iframe。

因此，我知道跟踪 iframe 上的点击的唯一解决方法是使用 blur 事件。您可以使用iframeTracker jQuery 插件轻松地做到这一点：

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

Answer 3

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