How to capture click event with jQuery for 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.

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

回答1:

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

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

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

IN ACTION: 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 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.

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

回答4:

You can use this jQuery plugin : 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(document).ready(function($){
    $('.vimeo_player iframe').iframeTracker({
        blurCallback: function(){
            // Stop your slider
        }
    });
});