Ramani Sandeep's Blog

DotNetting – Fast , Easy Way of Developing Applications

How to dynamically adjust an iframe’s height?

Posted by Ramani Sandeep on December 16, 2009


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

35 Responses to “How to dynamically adjust an iframe’s height?”

  1. Vijay said

    Thanks so much for this. Works like a charm. :)

  2. André said

    Hi,

    Nice script… Did you test in wich browsers?

    []‘s

  3. Val said

    Nice!! Thanks so much!

  4. asharaf said

    it is very nice

  5. Ivan R. said

    Nice one. Was looking for this and worked.

  6. Tapas said

    Does not work for me.
    Getting JS Error: Access is denied.

  7. Tapas said

    can anyone please let me know, how to fix this issue or any alternatives.

  8. David said

    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!!

    • Ramani Sandeep said

      Hi David ,

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

      Regards
      Ramani Sandeep

  9. Deltatech said

    Excellent!

    Exactly what I was looking for.

    But, we need to add 30 to the vertical scroll height otherwise it cuts off at the bottom.

  10. giulio said

    Oops! this code don’t work in Firefox 3.6.6 and Chromium 6

    • Ramani Sandeep said

      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

  11. David said

    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

    • David said

      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)

      • Kuttikrishnan said

        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

  12. Scot said

    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’;
    }

    • Ramani Sandeep said

      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

  13. Scot said

    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?

  14. haris said

    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

  15. Kapil Dhiman said

    Thanks Alot its working properly realy thanks.

  16. thanks Ramani…

    working properly at my site…
    awesome……

  17. Hakan said

    any idea how to use this within wordpress pages?

  18. Dude, you SO saved my bacon with this. Thanks.

    FYI, this works very nicely with jQuery Tools Overlay. I was loading an iframe into a dynamically generated overlay, and getting the iframe to resize when the content in the overlay changed was just a nightmare.

    Just in case anybody else is hunting for a solution like I needed, the details are here: http://flowplayer.org/tools/forum/40/68249#post-80060

  19. John said

    Hi Ramani, any idea how to make it work in Chrome? Thanks!

  20. [...] possible to do it dynamically. Here you go. http://ramanisandeep.net/2009/12/16/…80%99s-height/ [...]

  21. Yuvraj said

    Thanks, It works…

  22. muslimbodybuilding said

    This was amazing THANK YOU! God Bless!

  23. 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.

  24. It’s an awesome article designed for all the internet people; they will obtain benefit from it I am sure.

  25. Vivek Saha said

    Thanks It works fine.

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

 
Follow

Get every new post delivered to your Inbox.

Join 153 other followers

%d bloggers like this: