如何使用jQuery for iframe捕获click事件?

时间:2011-02-22 19:02:07

标签: jquery html iframe

我正在尝试在播放视频时暂停主页上的滑块,这样就不会继续滑动。请查看here

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

有关如何使这项工作的任何想法,或任何其他方式在播放视频时暂停滑块?我似乎陷入了死胡同,没有选择......

4 个答案:

答案 0 :(得分:3)

检测小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/

答案 1 :(得分: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/

答案 2 :(得分:2)

当内容来自其他域时,似乎无法捕获iFrame的click事件。一个可能足够好的解决方案是每当用户将鼠标移动到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/

答案 3 :(得分:1)

您可以使用此jQuery插件:https://github.com/finalclap/iframeTracker-jquery

使用jQuery选择器选择vimeo播放器iframe,并设置一个将关闭滑块的回调函数(或执行其他操作):

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