Question

Here are the functions calling it:

$("#iFrame").load(function () { resizeIframe(); }); // on load resize is called
loadIFrame(url); //this loads url in i frame 



function resizeIframe() {
    var iFHeight = $('iFrame').contents().height();
    var iFWidth = $('iFrame').contents().width();

    $("#content").css("height", iFHeight);
    $("#content").css("width", iFWidth);
}

If first time on load of iFrame height of content is 100px, second time on load of iFrame height of content is 200px. Third time on load height of content is again 100px, but it is stuck at 200px. Why is not changing the heights? Even though height is now 100px?

Answer 1

Try this.

$('iframe').load(function(){
    var $body = $(this).contents().find('body');
    $("#content").css({
        height: $body.height(),
        width: $body.width()
    });
})
.attr('src', 'iframeUrlHere');