Question

我经历了这篇文章。 Detect Click into Iframe using JavaScript

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

一位开发人员告诉我：

您可以将透明DIV放在IFRAME之上。你的大小   DIV与IFRAME相同或更大。而且更高   z-index CSS属性。

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

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

但我对div并不是很好，并希望学习如何做到这一点。感谢

P.S。它是关于跨域或外来域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

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

因此，我知道跟踪点击iframe的唯一解决方法是使用模糊事件。您可以使用iframeTracker jQuery Plugin轻松完成此操作：

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

Answer 3

查看Jquery的.live方法。

它可以在现在和将来将事件处理程序附加到选择器，例如将内容加载到div中时。

http://api.jquery.com/live/

使用Invisible div检测Click Inside IFrame

3 个答案:

jsFiddle