html - Get height of element inside iframe with jQuery

Question

I have a file containing an "iframe" element

<iframe src="test.php" width="100%" id="frameDemo"></iframe>

and a file test.php containing a div of unknown height.

<div>some content...</div>

I would like to create a Jquery script to get the height of the div inside the iframe.
I've tried the following but I receive a null response.

$(document).ready(function() 
{
    var mydiv = $( "#frameDemo" ).contents().find("div");
    var h = mydiv.height();
    alert(h);
});

Can anybody please help me? Thanks in advance.

Answer 1

Assuming the iframe is on the same domain (otherwise it's not possible), you should wait for the iframe to load first :

$(document).ready(function() {
    $( "#frameDemo" ).on('load', function() { 
        var mydiv = $(this).contents().find("div");
        var h     = mydiv.height();
        alert(h);
    });
});