如何用jQuery捕获iframe的点击事件?

I'm trying to pause the slider on the homepage when a video is played so it doesn't keep sliding. Check it out here.

当播放视频时，我试图暂停主页上的滑动条，这样它就不会继续滑动。检查出来。

I've tried adding a div on top of it and capture the click events for the div, but that doesn't work. It just passes the events on to the iframe I suppose. Note that the iframe is loading content from Vimeo, not from my site.

我试过在它上面添加一个div并捕获div的单击事件，但这行不通。它只是把事件传递给iframe。注意，iframe正在从Vimeo加载内容，而不是从我的站点。

Any ideas on how to make this work, or any other way to pause the slider when the video is played? I seem to be at a dead end with no options...

有没有什么办法可以让视频播放时暂停滑块?我似乎处于没有选择的死胡同。

4 个解决方案

#1

It seems like it would easier to use Vimeo's API to register for events fired by the player.

似乎使用Vimeo的API来注册玩家触发的事件会更容易。

An example can be found here: https://github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/froogaloop.html

这里可以找到一个例子:https://github.com/vimeo/vimeo/vimeo -examples/blob/master/moogaloop /javascript/froogaloop.html。

Documentation: http://vimeo.com/api/docs/moogaloop

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

IN ACTION: http://jsfiddle.net/u5jG6/

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

#2

Another method of detecting clicks in a small iframe, such as the Facebook iframe, is to use the mouseenter and mouseleave events.

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

#3

It doesn't seem possible to capture the click event of an iFrame when the content is from another domain. One solution that might be good enough is to pause the animation whenever the user moves the mouse over the iframe and then play it again when the mouse leaves. This seems to work fine even if the user chooses to go fullscreen in the Vimeo player.

当内容来自另一个域时，似乎不可能捕获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>

Here's my little test http://jsfiddle.net/r8guJ/

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

#4

You can use this jQuery plugin : https://github.com/finalclap/iframeTracker-jquery.

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

Select the vimeo player iframe with a jQuery selector and set a callback function that will turn off the slider (or do anything else) :

选择带有jQuery选择器的vimeo player iframe并设置一个回调函数，该函数将关闭滑块(或执行其他操作):

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

#1