Question

我想检测点击INSIDE iframe没有点击iframe本身我试过onclick事件你必须点击iframe本身触发功能我甚至尝试addeventlistener到窗口或文档没有工作，好像iframe不存在功能永远不会triger时我在iframe里面点击:( plz help

Answer 1

仅适用于同一域名的iframe：

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

Answer 2

出于安全原因，网页浏览器不允许您访问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)
        }
    });
});

Answer 3

试试这个

$(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上的点击，然后使用鼠标悬停事件，然后模糊

Answer 4

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

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

Answer 5

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

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

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

检测iframe内的点击

5 个答案: