如何使用jQuery为iframe捕获点击事件？

我试图在播放视频时暂停主页上的滑块，使其不会滑动。看看here。如何使用jQuery为iframe捕获点击事件？

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

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

2011-02-22 James Skidmore

可能重复[如何click事件添加到一个IFRAME JQuery]（http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery） – 2011-02-22 19:03:45

@Felix，这个问题从来没有回答。这个iframe是来自第三方的内容，所以在另一个问题中提出的解决方案不起作用。 – 2011-02-22 19:06:24

哦，好的。对不起，我很快浏览了这个问题。 afaik不可能。我的意思是，如果你在iframe上面放置一个div，你应该能够捕获点击事件，但是它们不会再被转发到iframe。 – 2011-02-22 19:07:23

看起来用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/

来源

2011-02-22 19:43:40 dochoffiday

这似乎并不可能在内容捕捉到一个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/

来源

2011-02-22 19:45:44 jimmystormig

在小iframe中检测点击的另一种方法，如Facebook的iframe中，是使用的mouseenter和鼠标离开事件。

<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/

来源

2011-09-30 21:07:21

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

选择用jQuery选择的VIMEO播放器IFRAME，并设置一个回调函数，将关闭滑块（或做别的事）：

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

的

来源

2013-04-03 17:44:22 Vince

如何使用jQuery为iframe捕获点击事件？

回答

相关问题