Question

I have a simple iFrame … 

<iframe src="url" width="980px" height="90px" id="inviteFrame" name="inviteFrame" scrolling="no"></iframe>

I know I can’t catch click events on elements inside the frame but how about a simple click or mousedown on the iFrame itself?

$('#inviteFrame').click(function() {
    console.log('test');
    $(this).attr('height', '140px');
});

This doesn’t work for me!

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');