【问题标题】:detect click inside iframe检测 iframe 内的点击
【发布时间】:2010-03-18 18:55:06
【问题描述】:

我想检测点击 INSIDE iframe 而不是 onclick iframe 本身我尝试了 onclick 事件你必须点击 iframe 本身来触发功能我什至尝试将事件监听器添加到窗口或文档没有任何工作,就好像 iframe 不存在该功能永远不会触发我在 iframe 内点击:(请帮助

【问题讨论】:

  • 您是否尝试将侦听器放在 iframe 内内容的 BODY 标签上?
  • 它是 iframe 中的外部站点;我不能添加任何东西...
  • 有可能,见跨浏览器解决方案:stackoverflow.com/a/32138108/1064513

标签: javascript jquery


【解决方案1】:

仅适用于同一域中的 iframe:

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

【讨论】:

【解决方案2】:

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

但是有一种解决方法,使用单击 iframe 时触发的 blur 事件(因为当 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)
        }
    });
});

【讨论】:

【解决方案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 上的点击,然后使用 mouseover 事件然后模糊

【讨论】:

  • 这行得通……我想不是在所有情况下,但这是一个方便的技巧
【解决方案4】:

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

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

【讨论】:

    【解决方案5】:

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

    然后当你点击 IFRAME 时,DIV 会收到事件。

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

    【讨论】:

    • 如果有人这样做并捕获了对 div 的点击,是否有办法传播它(实际上它会模拟对底层 iframe 中相同位置的点击...)?
    • 这种情况下div没有收到点击事件。如果内容来自不同的域,则无法在 iframe 上方或内部进行点击检测。
    猜你喜欢
    • 2012-11-06
    • 2021-04-13
    • 2011-05-23
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-21
    • 1970-01-01
    相关资源
    最近更新 更多