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 “autoHeight” 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 class="autoHeight" 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.
And that’s how easy it is to do auto iframe height!
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.
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.
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.
Hello,
Could you please tell me how i can used this code for cross domain?
Cool! perfect n_n …
Excellent!! save my work on my portfolio. 😀 In the add class name, the example need the … class=”autoHeight” code
Thank you for the comment. I’m not sure why it wasn’t in there but I’ve added it now. It should’ve been in there. Enjoy!
not change iframe reload