Jquery capture Click on Iframe

Question

So I have an Iframe on my page like

<iframe width="640" height="360" frameborder="0" allowfullscreen="" src="http://www.youtube.com/xxxxxx">

I was wondering how I could capture the click event on this. The Iframe's do not have an id or class set on them

Answer 1

You can not interact with iframes which are not under the same domain. This is always prevented by the browser's policy.

See Detect Click into Iframe using JavaScript

Answer 2

I ran into a situation where I had to track clicks on a social media button pulled in through an iframe. A new window would be opened when the button was clicked. Here was my solution:

var iframeClick = function () {
    var isOverIframe = false,
    windowLostBlur = function () {
        if (isOverIframe === true) {
            // DO STUFF
            isOverIframe = false;
        }
    };
    jQuery(window).focus();
    jQuery('#iframe').mouseenter(function(){
        isOverIframe = true;
        console.log(isOverIframe);
    });
    jQuery('#iframe').mouseleave(function(){
        isOverIframe = false;
        console.log(isOverIframe);
    });
    jQuery(window).blur(function () {
        windowLostBlur();
    });
};
iframeClick();