How to dynamically adjust an iframe’s height?


Last day when I was using iframe in one of my project , i came across one problem & I have solved it now.

so I think why not to share with you all. I was looking to display content of the other aspx page inside iframe but i wasnt able to adjust the height of the iframe. so try out this solution to resolve it.

Insert iframe on page

   <iframe scrolling='no' frameborder='0' id='frmid' src=’getad.aspx'
            onload='javascript:resizeIframe(this);'>
   </iframe>

Use this javascript to resize iframe based on the height & width of child page

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';                        
 }
 </script>

What does this code do? When the body of the parent frame loads, it looks up the document element “childframe” which corresponds to the iframe. Then the page calls a function resizeFrame(). The function sets the height of the frame to be the scrollHeight, which effectively removes the scrollbar.

Hope this will help !!!

kick it on DotNetKicks.com

Shout it

About these ads

36 thoughts on “How to dynamically adjust an iframe’s height?

  1. Can you make a WordPress plug-in with this code to automatically adjust iFrame height based on contents of outside domain? That would be amazing!!

    • Hi David ,

      Can You tell me how to do that? becoz i have not developed any plug-in yet.

      Regards
      Ramani Sandeep

    • I have not checked it in new browser .. but if u found any solution than let me know.. so that i will update the code acco.. so it will be useful for others also..

      Thanks
      Ramani Sandeep

  2. This is what I came up with after many hours of searching through the net to solve my problem of dynamically loading iframes. I still couldn’t hide content using overflow:hidden for IE8 and Opera and as workaround added extra pixels to iframe’s height instead.

    HTML HEAD

    try{

    /* working – IE8 is still showing scrollbar (could be just our app)
    function setHeight() {
    parent.document.getElementById(‘pi_frame’).height = document['body'].offsetHeight;
    }
    */

    /* working but IE5.5 and 6 are showing scrollbars – we don’t care about these anymore */

    function setHeight(elmID) {
    var browserName=navigator.appName;
    if(browserName==”Microsoft Internet Explorer” || browserName==”Opera”){
    parent.document.getElementById(elmID).height = document['body'].offsetHeight + 180;
    //parent.document.getElementById(‘pi_frame’).height = document.all.elementID.offsetHeight; // IE only?
    }
    else{
    parent.document.getElementById(elmID).height = document['body'].offsetHeight;
    }
    }

    }
    catch(e){
    alert(‘An error has occurred: ‘+e.message); // comment out when finished testing
    }

    .pi_frame_class { overflow:hidden; overflow-x:hidden; overflow-y:hidden; padding-bottom:15px;width:96%;border:0px;padding:0px;margin:0px; }

    HTML BODY

    • This was tested on:
      – FF (PC/MAC both 3.6.7)
      – Safari (MAC 5.0 b6533.16)
      – Chrome (PC/MAC both 5.0.375.99)
      – Opera (PC 10.60)
      – Netscape (PC 9.0.0.6)
      – Nokia N900 default browser (PR1)
      – IE5.5/6 (PC, scrollbars)
      – IE7/8(PC)

      • Hi David,

        Thanks for the solution..

        In the above code you are hard coded the value 180 . Please let me know the reason why this is 180 and why it is not 200 or 250,…..


        if(browserName==”Microsoft Internet Explorer” || browserName==”Opera”){
        parent.document.getElementById(elmID).height = document['body'].offsetHeight + 180;

        Regards,
        Kutti

  3. I tried this. I get Access is Denied errors.

    script language=”javascript” type=”text/javascript”>

    function resizeIframe(obj)
    {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + ‘px'; //access denied
    obj.style.width = obj.contentWindow.document.body.scrollWidth + ‘px';
    }

    • there might be some permission issue.. first time i got this query from the user of this script.. please check the file permission that you are showing inside iframe.

      hope this will helps

  4. My iframe is populated by controls which arrive from another domain. Will this work? It didn’t work when I tried it. Does the page hosting the iframe and the page that goes into the iframe window have to be from the same domain?

  5. HI,
    i am having a problem in making my Iframe work with the inner content ,,,i hav a chat script in my iframe in wordpress blog…it is not picking up the auto height so that when the chat script is minimized the content should be with the minimized bar and when maximized it should flow down till the content in the iframe

    any who can help me out with this please???

    regards HARIS OLA

  6. Pingback: Scale contents of an iframe?

  7. hey there and thank you for your info – I have definitely picked up anything new from right
    here. I did however expertise several technical points using this website, as I experienced to reload the
    site a lot of times previous to I could get it to load
    properly. I had been wondering if your hosting is OK? Not
    that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and can damage your high-quality score if ads and marketing with Adwords. Anyway I’m adding this
    RSS to my email and could look out for much more of your respective intriguing content.
    Make sure you update this again soon.

  8. Pingback: How to resize iframe when content loads.. | ASP Questions & Answers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s