how to set iframe height dynamically depending up on the content

Question

I am using <iframe id='' src =" + url + " style='width:100%;border:none;'></iframe> I am trying to set the iframe height depending upon the content height. If I didn't mention height for the iframe,it is taking default height. can any one tell me how to set the iframe height depending upon content height....

Always post that which you have tried and where you are stocking? — Code Lღver, Dec 19 '13 at 10:27
http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript — reyaner, Dec 19 '13 at 10:47

score 0 · Answer 1 · answered Dec 19 '13 at 10:49

You can refer below code:

jQuery(document).ready(function(){
var height = $(window).height();
$('iframe').css('height', height)
});

In the above example, I have set window's height to iframe. As per your requirement, you can take your content's height and then set it to iframe's height.

Hope this helps!

score 0 · Answer 2 · answered Dec 19 '13 at 10:55

HTML:

<iframe name="i_frame" id="i_frame" src="" onload="iframeAutoSize( this.id );">
</iframe>

JS:

function iframeAutoSize( id ) {

    iframe_element = document.getElementById( id );

    if ( iframe_element ){

        var new_height = iframe_element.contentDocument.documentElement.offsetHeight;
        //var new_width = iframe_element.contentDocument.documentElement.childNodes[2].offsetWidth;

        $("#"+id).height( new_height );
        //$("#"+id).width( new_width );
    }
}

score 0 · Answer 3 · answered Dec 19 '13 at 10:59

0

You can use below code in .

style="height:auto;"

answered Dec 19 '13 at 10:59

Rahul Sahu

274
1
4
15

how to set iframe height dynamically depending up on the content

3 Answers3