Click-event on iframe?

Question

I have a simple iFrame … 

Answer 1

jQuery has a method, called .contents(), that when used on an iframe element returns the document of the iframe.

// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);

Now you can bind an event to it, get the dimensions, get styles of various elements, etc:

// Get width of iframe document
$(iframeDoc).width();

// Get height of iframe document
$(iframeDoc).height();

// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
    // do something
});

// Get the style of an element in the iframe
$('div', iframeDoc).css('backgroundColor');

Answer 2

You cannot do this because of web browser's same origin policy.

But you can use a workaround with the blur event and mouseover/mouseout events. That's how works my iframeTracker jQuery plugin, designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery

Here is an example :

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

Enjoy !