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" class="autoHeight" scrolling="auto" frameborder="0" src="http://example.com/iframe.php"></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.