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 !!!
Vijay said
Thanks so much for this. Works like a charm.
André said
Hi,
Nice script… Did you test in wich browsers?
[]‘s
Ramani Sandeep said
hi andre
I have tested this code in IE , Firefox. It works in that..
Val said
Nice!! Thanks so much!
asharaf said
it is very nice
Ivan R. said
Nice one. Was looking for this and worked.
Tapas said
Does not work for me.
Getting JS Error: Access is denied.
Tapas said
can anyone please let me know, how to fix this issue or any alternatives.
Ramani Sandeep said
Hi Tapas, can you provide some code where you are getting error.
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
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.
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
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
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
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?
Ramani Sandeep said
try this :
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx
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
kumar said
hi haris , same problem i m also facing.. got any solution for this ? pls let me know
Kapil Dhiman said
Thanks Alot its working properly realy thanks.
review site said
thanks Ramani…
working properly at my site…
awesome……
Hakan said
any idea how to use this within wordpress pages?
Ramani Sandeep said
no idea.
montidesign said
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
John said
Hi Ramani, any idea how to make it work in Chrome? Thanks!
Scale contents of an iframe? said
[...] possible to do it dynamically. Here you go. http://ramanisandeep.net/2009/12/16/…80%99s-height/ [...]
Yuvraj said
Thanks, It works…
muslimbodybuilding said
This was amazing THANK YOU! God Bless!