检测iframe内的点击

我想检测点击INSIDE iframe没有点击iframe本身我试过onclick事件你必须点击iframe本身触发function我甚至尝试addeventlistener到窗口或文档没有工作,好像iframe不存在function永远triger当我点击里面iframe :(请帮忙

仅适用于同一域中的iframe:

$('body', $('select-your-iframe-here').contents()).click(function(event) { console.log('Clicked! ' + event.pageX + ' - ' + event.pageY); }); 

出于安全原因,Web浏览器不允许您访问iframe的内容(除非iframe与父页面位于同一个域中)。

但是有一种解决方法,使用在点击iframe时触发的模糊事件(因为当iframe获得焦点时,父页面会丢失它)。

我写了一个jQuery插件,它使用这个技巧来检测iframe上的点击,它可以在这里找到: https : //github.com/finalclap/iframeTracker-jquery 。 您可以在http://www.finalclap.com/tuto/track-iframe-click-jquery-87/上阅读该教程(它是法语版)。

要使用它,您只需匹配要跟踪的iframe元素,并提供回调函数:

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

试试这个

 $(window).click( function(e){ $('#result').text('Clicked inside document'); }); $(window).blur( function(e){ $('#result').text('Clicked out of the window or on the iframe'); });​ 

测试http://jsfiddle.net/4vBRe/

要仅检测iframe上的点击,请使用鼠标hover事件然后模糊

出于安全原因,您应该能够跟踪转到其他网站的IFRAME中的活动。 如果您自己的网站上有一个IFRAME转到您自己网站上的另一个页面,那么您可以通过直接在IFRAME运行的代码中添加点击跟踪来解决此问题。

如果这是不可能的,您可以考虑为IFRAME:ed网络服务器运行您自己的自定义代理服务器,这样您就可以再次添加自己的点击跟踪。 有关代码示例,请参阅_why的鼠洞。

您可以将透明DIV放在IFRAME之上。
您将DIV的大小设置为与IFRAME相同或更大。
并具有更高的z-index CSS属性。

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

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