jQuery : Auto iFrame Height

This article will show you how to automatically adjust the height of an iFrame to the height of the content inside of the iFrame with the use of the jQuery JavaScript library and the jQuery autoHeight plugin.

When you have an iFrame on a page and the height of the content in the iFrame is larger than the default or specified height of the iFrame, a vertical scrollbar will be shown which allows you to scroll the content inside the iFrame.

You can remove the scrollbar by adding the attribute scrolling="no" to the iFrame element but the overflowing content will simply be hidden. Alternatively, you can define an overflow:hidden; CSS style attribute to the iFrame but it will also just hide the overflowing content in the iFrame and won’t adjust the height of the iFrame to cater for the content inside it.

The solution is to automatically adjust the height of the iFrame – after it has loaded – according to the height of the content inside of it. This can be done with the jQuery autoHeight plugin.

Reference jQuery

Before you can automatically adjust the height of iFrames on your page(s) with the use of the jQuery autoHeight plugin, you’ll need to reference the actual jQuery library on your site. You can do so by downloading jQuery and referencing the script on your page(s). Put jQuery on your server and use the following code to reference the script.

<script type="text/javascript" src="jquery.js"></script>

The code above will load jQuery if the “jquery.js” file is in the same directory as the current file. If you put jQuery into a subfolder like “js” for example, the SRC attribute in the code above should be changed to “js/jquery.js”.

Reference the autoHeight plugin

With the jQuery SCRIPT tag in your page, you’ll need to reference the jQuery autoHeight plugin as well. Same way as you did with jQuery, you’ll need to download the jQuery autoHeight plugin and put its JavaScript file on your server and reference it with a SCRIPT tag like below.

<script type="text/javascript" src="jquery.autoheight.js"></script>

Add Class Name

All that is left to do is to add a class name to the iFrame(s) which need to be automatically adjusted in height in order to fit all of the content into the iFrame without any scrollbars. Below is an example.

<iframe id="myframe" name="myframe" src="http://example.com/iframe.php" height="240" width="320" frameborder="0" scrolling="auto"></iframe>

jQuery Auto iFrame Height Demonstration

UPDATE : Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.

  • http://www.autopilottools.com Elton Morais

    Yes, there’s a simples, idiot and dumb way to get the same result with an external domain…

    Instead of use scroll=no on the iframe, I change it to “auto”. Then, I get the size of the actual window

    $(window).height();
    and use that as the iframe height attribute.

    Well, the result is…

    We will never have the “page” scroll, only the “iframe” scroll. When You navigate, doesn’t matter who is the scroll, but the important is that there’s only 1.

    Well, there’s the problem of the user simply resize the window while he’s navigating. To solve that, I use:

    setInterval(getDocHeight, 1);
    Did You think that that solution will cause any bugs? It’s working for me, and on the iFrame I had dynamic contect generated by php. I’m afraid of future bugs with that…

    Off course, the “iframe” scroll will be, allways, of the same size of the page. So, while navigating, You just see it as it was the “page” scroll.

  • http://theemeraldcurtain.com Phillip

    The plugin works great! Thanks so much!

  • http://www.kingofdevelopers.com Abdul Rehman

    I am using ur code it is working fine but i have a new frame which change content using ajax technique.

    onload iframe loads data nicely but when content is changed using ajax iframe do not readjust its height

    (My parent page and iframe are on same domain)

    Please help me.

  • http://www.tvrtechnologies.co.in prakash

    i has used iframe auto plugin properly. if i set scrolling = no, so that when content in iframe is increased. The iframe is extend with out scrollbars but is hidden in parent page. I want parent page to be extended.
    when iframe extend. so that we wont see ugly scroll bars.

  • http://www.autopilottools.com Elton Morais

    Hi, Abdul Rehman

    On my previous post I had a idea for solve the problem with external content and could it work with ajax.

    In a external content, will work only if there’s only the iframe on the page. But the second part (to adjust the height) could work on another situation, like yours.

  • Pingback: Miyakawaブログ » iframe の高さを自動調整する方法

  • prakash a

    Hello,

    Could you please tell me how i can used this code for cross domain?

  • Pingback: iframe高度自适应demo及下载 « LNMP100实验室–PHP、Python技术博客,专注于互联网开发

  • Hyoubu kyousuke

    Cool! perfect n_n …