How to set iframe height to fit content?

Question

I am trying to remove scrollbar from Iframe. When I set height of Iframe manually it works but Iframe size can change and I don't know how to get Iframe height when page loads.

Is there any way to remove scrollbar and fit Iframe content?

<div class="portlet" id="pageContainer">
    <iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe>
</div>

When I try to below function it doesn't return correct height. (It returns 2000px but my Iframe height is nearly 3000px)

$('iframe').load(function() {        
    this.contentWindow.document.body.offsetHeight + 'px';
});

Answer 1

You can use

$('iframe').load(function() {
    $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
})

or

$('iframe').load(function() {
    setTimeout(function(){
        $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
    }, 3000);
})