Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
Will resize an iframe like this:
<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>
Still problematic…
- The source of the iframe content must reside on the same domain
- if the content inside the iframe changes height, this won’t adapt
- I left Google Analytics code off the demo above, as when I added it in it seems to interfere and not resize the iframe, despite seemingly generating no errors.
Excellent, this is exactly what I was looking for :)
does anyone experienced bug on IE? …IE didnt resize the iframe instead it rendered a fixed height for the iframe. Any fix yet? Thanks
Just what I needed! Awesome fix man. Thanks!
I doesnt work in IE 7 or 8. Tested in IETester
Hi Chris, I’m wondering if you know of any script that would adapt the height of the iframe if the content inside the iframe changed height. Thanks!
I am real new at this. Where within the page code do I put your code?
MAN! this is what i needed, i dont know why i didnt think of it, absolute lifesaver
-cheers
Hi,
above code working in ie7 fine.but its not working in ie8.could u please send the code for that.
excellent!
thanks :D
tested with success in IE9 for windows.
Set doctype transitional on top of html code.
Still need some tweaks to adjust the page width I want.
Hello !!!
Your code not work in chrome explorer ( your code = other codes ).
Please send true code for me.
thanks.
hello everyone. same question here. where should i put script above.
thank you
Thanks for the script! I added styles to the iframe for IE, FF & Chrome.
Thanks Muz
style=”height:100%;width:100%;min-height:800px;”
Thanks for the script. I decided to used it for now. If it breaks for different browsers I’ll try and think or find something else. Meanwhile I also found this:
http://www.iframehtml.com/iframe-scripts.html#resizeable-iframe
Thought I’d share it here. Seems easy and quick to use, the demo page works fine but this solution didn’t agree with my code.
Do not work with IE 6:(
Maybe I can set minimal height?
I got around the cross domain issue (atleast for subdomains) with
document.domain = “yourdomain.com”
Pardon my ignorance here but can you please explain where you inserted the document.domain?
Works like a charm. Thanks.
Does anybody know how to do this when you embed a PDF in the iframe? I’m generating the PDF dynamically with a server-side script (ASP.NET MVC). The problem I’ve found is that, when the .load function, the PDF hasn’t been rendered to the iframe yet, so the “current” height is something like 150px (default maybe).
Any ideas?
(Great post by the way!)
Try to add edit your code on if statement replace your code on this code, hope it works:
if ($.browser.safari || $.browser.opera || $.browser.msie && $.browser.version==”6.0″) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
The height DOES adapt to changing content in the iframe, in latest IE and Firefox!
I am from Brasil and this tuto is show, show, show.
excellent!
thanks :D
I didn’t think this was possible for some reason. I’m building a site right now with various tables loading from another site (sport scores). Being able to resize the iframe like this will make it look like part of the main site. Awesome!
This works for me even on IE and it doesn’t require jQuery
Hey, so is there maybe an update on this article? I have tried several versions and i still get problems with Safari for example. Is there really a workaround that works on all browsers IE7+?
Cheers
Hello,
thanks for useful script.
It works fine for file from same domain.
But I want to show Google spreadsheet in iframe.
and above script does not work for me.
Please can you suggest solution.
In Firebug I see next error:
Error: Permission denied to access property ‘document’
this.style.height = this.contentWindow.document.body.offsetHeight + ‘px’;
Hi, i am trying to add iframe blog using this code.
Just want your help, how you removed that error ?
Please reply.
Thanks.
You can do the same by making the script run inside the iFrame body, when body loads, find the iframe in window.top and change its style height
unfortunately I found a very nasty bug on IE9 (fixed in IE10), when I change height, it some how affects the main window, and rolls down my css media to match the rule that fits the iframe WIDTH! so if iframe width is 900px, it will render the whole page under media rule @media only screen and (max-width: 960px)
:'( how do we prevent an iframe change in height from re-running the parent css media queries?
Hi,
Did you solve this problem? We’re experiencing the same.
Problematic issue #2 can be addressed with a touch of JS after the function! Here’s a trick @grahamkennery showed me:
setInterval(iResize, 1000);
Essentially this will ask the function to double-check its work every second. This is ideal if the source of the iframe changes size!
@ArleyM
Either I don’t know where to put the setInterval(iResize, 1000);
or it just doesn’t work.
Hope it works and I’m just plain wrong
Thanks!
Hi Rico,
This is working for me….
Also, note that recent versions of jQ need the
if ($.browser.safari || $.browser.opera) {
bit to be updated toif ($.support.safari || $.support.opera) {
Hope this helps, Thanks!
Wow.. nice stuff! thanks a lot
But what if it’s on another domain? Like, fb comments?
Help Me
How to add CSS class and control elements inside of the Iframe using javaScript…
Please Please Help
Thanks
This worked perfect. I am impressed with it!
thanks you, great tips
yes, its works ,thanks
but
1.i got the access denied error in script
2. my Iframe have static content its working fine.
3.if I have combox box ,based on that I can load the content.its not working.
yes, its works ,thanks very much.
while I load dynamic content ,I used
//parent page
function Resize() {
var iFra = $(‘iframe’);
for (var i = 0, j = iFra.length; i < j; i++) {
iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + ‘px’;
}
}
// Iframe page.
parent.Resize();
That’s cool but I need codes for that when we click a text, a page with forms etc. comes up.
This is My Parent Page: I Have two Iframe with different page with dynamic Content.
Privacy Policy
You may choose to give us personal information, such as your name and address or e-mail id that may be needed, for example, to correspond with you, to download our white papers or to provide you with a subscription. If you tell us that you do not want us to use this information as a basis for further contact with you, we will respect your wishes. We intend to protect the quality and integrity of your personally identifiable information.
Cookies, and other technologies
**
**
Anbuselvan
**
**
Iframe Page:
In this I am used Combo and GridView .Based on Combo value the gridview row has been binded.
(Dynamically Loaded data from DB.)
Not work for me
Hi.
Thank you very much for this, it could be a life saver.
I have a concern, and a problem to ask if you know of any fix, please.
The concern is, I have 2 iFrames within one DIV, the first and topmost one if for a range of “thumbnail” images of photographs that a visitor can look and select.
The selected one then loads the full size photo the iFrame below.
It works wonderfully apart from the fact that the photographs are all different heights, so the default page has to all different sizes to accommodate…….. :-(
Your script works wonderfully in adjusting the page to suit the size of the photograph, apart from the fact that it seems to cut off a small portion of both the Thumbnail and the main photo frame along the bottom…….
Any thoughts please would be greatly appreciated.
Below is the “iFrame” code with your fix put in place.
Thank you very much in advance.
Glen
P.S. I do not know what/where “triple backticks are…….. sorry
Is there any way to ad say 25 pixels to the offset query, I have a page that I want scrolling on when it’s resized, but when the iframe fits in the window, there seem to be 25 pixels that are still not accounted for, so it always has a scrollbar for that extra 25 pixels.
Thanks
is there any way to use scrollTop in this code instead of, offsetHeight?
I can’t seem to get it to work, the iframe just disappears
Hi. The .browser property has been removed from jQuery and browser sniffing is not recommended. What is the actual quirk that requires the workaround for safari and opera? If known, this can probably be feature detected. Thanks.
Amazing. It’s posting that I’m looking for.Tks verymuch
I tryed one zillions of scripts to make it work on IE and it never worked, same for this one but it work here… sometime http://fiddle.jshell.net/onigetoc/korxwt0e/
And here my first attemps to create a jQuery iframe fit resizer… but as usual, it do not work on I.E.
https://github.com/onigetoc/jQuery-iframe-resizer/
Hi,
I am facing a problem in the script when i am using source in the same file .
for example:
The script is not working for single word , its only working upto particular lenght .
Please Help
Thanks
Hi,
I am facing a problem in the script when i am using source in the same file .
The script is not working for single word , its only working upto particular lenght .
Please Help
Thanks
Hi All,
We have 3 frame in that if i use 1st frame the size should be 50 2nd & 3rd should be 25 like that it want auto change and if i use 2 nd frame the size automatically 50 and other 2 should be 25
Using CSS how can i do can anyone suggest
I’m a rank amateur, and even for me, so easy to use. Thank you!
My iframes look perfect in all browsers except chrome.
I couldn’t find a fix, so thought maybe just separating out chrome and giving it a set height so my iframes wouldn’t be so truncated might be at least better than nothing.
But I can’t seem to get it to work. (iframe heights are showing up at around 150px).
What might I be doing wrong with this?
It’s better to avoid using
scrolling
: it’s a deprecated attribute (see MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Deprecated_attributes)