如何使用 jQuery for iframe 捕获点击事件？答案

【问题标题】：How to capture click event with jQuery for iframe?如何使用 jQuery for iframe 捕获点击事件？
【发布时间】：2011-02-22 19:02:07
【问题描述】：

我正在尝试在播放视频时暂停主页上的滑块，以免它继续滑动。看看here。

我尝试在其上添加div 并捕获div 的点击事件，但这不起作用。我想它只是将事件传递给iframe。请注意，iframe 正在从 Vimeo 加载内容，而不是从我的网站。

关于如何进行这项工作的任何想法，或在播放视频时暂停滑块的任何其他方式？我似乎陷入了没有选择的死胡同……

【问题讨论】：

How to add click event to a iframe with JQuery的可能重复
@Felix，这个问题从未得到解答。此iframe 是来自第 3 方的内容，因此其他问题中提出的解决方案不起作用。
哦，好的。抱歉，我当时快速浏览了这个问题。没有可能性afaik。我的意思是，如果您在 iframe 上方放置一个 div，您应该能够捕获点击事件，但它们不会再被转发到 iframe。
你试过使用 top.jQuery 吗？在 iframe 上？

标签： jquery html iframe

【解决方案1】：

在小 iframe（如 Facebook iframe）中检测点击的另一种方法是使用 mouseenter 和 mouseleave 事件。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisthegovernmentopen.info%2F&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>

var inIframe = false;
$('iframe[src^="http://www.facebook.com"]')
.bind('mouseover', function(){
  console.log('entered iframe');
  inIframe = true;
  setTimeout(function() { 
    if ( inIframe ) { console.log('clicked on iframe'); }
  }, 1000);
})
.bind('mouseout', function(){
  console.log('left iframe');
  inIframe = false;
});

http://jsfiddle.net/gQzeA/

【讨论】：

第一。谢谢！第二。建议：使用 .live() 或 .on() 因为 iframe 在绑定事件时可能不在 DOM 中（特别是对于 Facebook 和其他社交小部件）。此外，我使用这种技术在我的页面上并排放置了几个社交小部件 - 我发现我需要清除 mouseout 时的超时（否则时钟会一直滴答作响，我会在其他 iframe 上快速获得“假定点击”）.. . 在您的代码中添加var hoverTimeout; 在顶部，然后hoverTimeout = setTimeout(function() { 并在“mouseout”函数内添加clearTimeout(hoverTimeout);。
第三条建议：如果您“假设点击次数”用于统计数据（例如 Google Analytics），我建议您将“假设点击次数”存储（缓存）在一个数组中。并且每个页面加载只允许 1 次假设点击...原因是社交小部件（如 Facebook 的点赞）在您喜欢/不喜欢之后会弹出额外的 iframe...当您将鼠标悬停在这些 iframe 上时，这会导致额外的“假设点击” .

【解决方案2】：

使用 Vimeo 的 API 注册播放器触发的事件似乎更容易。

可以在此处找到示例：https://github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/froogaloop.html

文档：http://vimeo.com/api/docs/moogaloop

在行动： http://jsfiddle.net/u5jG6/

【讨论】：

这就是我最终要做的。感谢您的帮助 Doc Hoffiday！

【解决方案3】：

当内容来自另一个域时，似乎无法捕获 iFrame 的点击事件。一种可能足够好的解决方案是在用户将鼠标移到 iframe 上时暂停动画，然后在鼠标离开时再次播放。即使用户选择在 Vimeo 播放器中全屏显示，这似乎也能正常工作。

<div class="item">
<iframe src="http://player.vimeo.com/video/20183913?title=0&amp;byline=0&amp;portrait=0" width="612" height="344" frameborder="0"></iframe>
</div>

<script type="text/javascript">
$("div.item iframe")
.mouseover(function(){
    alert("Pause animation");
})
.mouseout(function(){
    alert("Play animation");
});
</script>

这是我的小测试http://jsfiddle.net/r8guJ/

【讨论】：

谢谢！我没有仔细阅读以看到您总是从 Vimeo 加载内容。在这种情况下，Doc Hoffiday 的解决方案肯定更好。

【解决方案4】：

您可以使用这个 jQuery 插件：https://github.com/finalclap/iframeTracker-jquery。

使用 jQuery 选择器选择 vimeo 播放器 iframe 并设置一个回调函数，该函数将关闭滑块（或执行其他任何操作）：

jQuery(document).ready(function($){
    $('.vimeo_player iframe').iframeTracker({
        blurCallback: function(){
            // Stop your slider
        }
    });
});

【讨论】：