This week I needed to automatically size the height of an iframe to the height of its contents. After a bunch of Google searches I came across this post from Nathan Smith here; It used jquery but applied the auto height to every iframe on the page, I could not use the code out of the box and so the 'jQuery iframe auto height plugin' was born. I made a few slight changes to the original code and wrapped it in a jquery plugin.
Download from github
http://github.com/house9/jquery-iframe-auto-height
see the README file for usage
30 comments:
Hi,
Thanks for making this available, I have tested this with regular content (h1, p)on html pages, It was successful.
But found some problems where "style="height:XXpx" is not set properly. One instance the height was set to 143 px instead of the real content height (>1500px).
Pages in question are .asp with "includes" calling multiple files (Header, footer, top menu)
I though the problem was that the iframe's source was calling an https but I switch to a non https file and I still the problem
@Rafael, I wonder if the issue you are encountering is related to this?
https://github.com/house9/jquery-iframe-auto-height/issues#issue/1
The fact that the html is generated by asp pages should not matter
I use this plug-in with my code.
(1) I found that it is ok in google chrome. In google chrome will have some problem if afer load 1500px height IFRAME then we can not get short IFRAME.
(2) in IE8 and opera would give the wroung IFRAME size.
Please, help me.
can you post some code that I can look at? I just did a test with chrome with a very tall iframe and did not have any issues?
I am going to do further tests on IE8, with simple example it seems to work just fine
I'm having similar issues, in Chrome the page will not get short again, it will expand the height initially to long pages, but then when I go to short pages, the page doesn't shorten. https://www.mattel.medsch.ucla.edu/ptrg.asp click on the links on the left "History", "Missions", etc.
I'm having some issues with this in Safari. It seems to resize the iframe prematurely. Anyone else experiencing this?
Hi,
For information, demos don't work with chrome 9 :'(
the code works great but it doesnt auto-resize if the contents of the page inside the iframe is created dynamically, i have a page for newsfeeds that dynamically ads new divs every 5 seconds, is there a way to call the resize function whenever needed?
@lamy, yeah the plugin only does resizing when the iframe loads, any clientside changes don't refire the resize.
I just messed around, here is some code that might do what you want, will try to incorporate something similar in the future
https://gist.github.com/853055
this replaces the plugin code, there is 1 additional public method at the bottom and then an example of how you might call it
Thank you for this code. It works very well for me.
Do you have a version that will do the same thing using pdf files instead of html files?
Thank you again for sharing this code, and thank you for any help you can offer.
I don't know how you would accomplish the same thing for PDF files? it is using javascript and the html DOM to resize things, as far as I know PDF does not expose anything like html DOM, in fact many browsers do not inline PDF.
OK, thanks.
Hi Nathan,
is there any way to build in a check for the type of media that’s included in the iframe? Adjusting the height of text files and images automatically works fine as far as I’ve tried this out on my own page, but the problem with audio files is that the iframe will use the heigth of the previously viewed file, so you may easily get a 1000 px high audio player window in the iframe… So ideally, I’d like to exclude any file type other than text and image files from automatic resizing, and instead leave the value at a default of, say, 200 px. If this sounds too abstract, here’s what I wanted to use the script for: http://goo.gl/F7Zsf (Caution: contains serious geekery).
The thing is, in that iframe sometimes .mp3 and .pdf files have to be included, however those of course don’t have a height. I tried my luck with if-statements in the function resizeHeight(iframe) clause, checking the file name with iframe.contentDocument.baseURI.lastIndexOf(), however that only seems to allow for the case "is" and "is not" (e.g. if(...lastIndexOf("mp3") == '-1') { *do stuff to resize* } else { *set a fixed value* }), so I cannot check multiple values with that. My Javascript-foo is weak and else if doesn't work like I'd expect (from PHP), so I don't know how to proceed. It’s driving me nuts :O
Best Wishes!
when i include the iframe.js,in this $ is not defained
@Venkatesh - you must include the jquery.js, see the markup in the head tag, you need both of those script tags
https://github.com/house9/jquery-iframe-auto-height/blob/master/index.html
@carbeck - you might want to build up an array of file extensions that you do not want resizing for, then check the iframe.src $(iframe).attr('src') attribute and loop through the array using lastIndexOf
there is probably a better way
- Jesse
This is what I have been looking for, but I seem to have trouble with FF3.6. The contents of my iFrame is a .net application, so it is not doing a total refresh, but a postback. The same page works fine in IE7 and the iframe appears to resize properly. (your example code works fine in FF)
Thanks,
David
Hi,
Thanks for this great plugin !
I've got just one problem (Chrome12, FF4) : when the iframe is resized on a big page, the page scroll up to the top. I just want to the iframe be resized but no scroll appears.
Is this possible ?
Thanks, Yo
@YoOne, I'm not 100% sure I know what you mean, if the 'host' page is scrolling back to the top after the iframe is resized, it is most likely because the total content has shrunk to only be as big as the browser window?
do you have an example I can look at
if the above is the issue, maybe adding 'spacer' divs below the iframe would stop this from happening?
Hi,
Unfortunately, I can't show you the problem because the pages are on my intranet.
The major problem is that on the child iframe, I put a text editor (the great aloha editor) : so, users can comment parts of the page. When the comment grow (carriage return for example), the main page scroll to top.
Just to apologize, sorry for my poor english, it's difficult to me to explain in not my natural language :)
Thanks, yo
Hi,
I am experiencing a problem I can't understand and I hope you are able to help me. The thing is I am accessing a site (my site) from 2 different methods both using MSIE 9. One from my private pc where the Iframe behaves beautifully expanding and auto adjusting. But when I access the same page via my citrix connection running MSIE9 too the page is cut off and I can't scroll to the bottom of the page. If instead I use Firefox on the Citrix it once again show as beautiful as I had planned.
Can you give me a hint on what to do?
You can check the page at:
http://www.stat.gl/BEE201003/o1
best regards
Lars
Sorry for double post. My comment was: Is there a solution for cross domain issue? Is there some js I can add that would allow this to work cross domain?
Thx
Hi,
is it possible to add "auto-width" funtion? E.g. if the iframe has an content, which has style="width:500px". If the widht cannot be determined, then just use some default (100%).
Hello,
I'm using your script to load a registering script(php) inside Drupal7. The script returns a confirmation page inside the iframe on success.
Your plugin-script works very well in allmost every browser I've tested. I only have a problem with Firefox(I've tested with several versions) when the confirmation page is loaded. The first page with the registering form is nicely adjusted to the right height. The confirmation page however inherits the length of the first page. So it looks like a blank page and you have to scroll up to see it has data in it. All the other browsers I've tested handle this right and adjust the page-length of the second page.
I hope it is possible to solve this problem.
Thanks, Erik
Hi,
nice plugin! I had a small problem with a frameset loaded in the iframe (yes, I know...) because a frameset has no body tag. I fixed it by replacing "var newHeight = $body[0]...]" (line 75) with the following code:
var newHeight=0;
if ($body.length>0) {
newHeight = $body[0].scrollHeight + options.heightOffset;
}
This way the minHeight is used when no body tag is found.
Maybe this is useful for others too.
@Erik Verkuil - the plugin fires when the iframe loads, my guess is the form is submitting using ajax and never reloads - If that is the case I would not expect it to work in other browsers either, have you tried specifying debug:true and checking the output to the firefox console?
Thanks for your reaction.
The script that loads the form and the confirmation inside the Iframe is a php-script that just shows another html-page after the form is submitted, no ajax is involved.
I did what you suggested and here is the output of the console.
When the form is loaded-
({heightOffset:0, minHeight:0, callback:(function (newHeight) {}), debug:true, diagnostics:false})[object XrayWrapper [object HTMLIFrameElement]]
New Height: 1567
After submitting the form -
New Height: 1567
Hope this will do.
Erik
it must have something to do with Durpal - your console output of [object XrayWrapper [object HTMLIFrameElement]]
but in my demo pages that line outputs the iframe dom element - i.e. - <iframe scrolling="no" frameborder="0" style="width: 660px" src="/iframe_content/pic2">
At the same site I use another Iframe to load an Imagegalerie and in this case your plugin works well in Firefox when the images(links) are clicked.
Console Output:
({heightOffset:0, minHeight:0, callback:(function (newHeight) {}), debug:true, diagnostics:false})
[object XrayWrapper [object HTMLIFrameElement]]
New Height: 402
--
New Height: 501
--
New Height: 545
After switching to the slideshow it does not work anymore. Is this also a Drupal problem?
Erik
I have not used Drupal, so don't know much about it - but it does seem to be the factor
Post a Comment