Have you ever found the need to display documents behind IFrames? Wondering how the height could be automatically adjusted to the IFrame contents, so it doesn't display scrollbars?
Note though that the solution presented here will not work for documents located on different domains.
Ok, let's see...
- The IFrame size is computed everytime its content is loaded, but also when the main window is resized. Hopefully, this demo allows you to play with that.
- The 3 documents used in the sample use different DOCTYPES. The last one doesn't, so it makes the browser work in quirks mode, where it is much trickier to detect the inner document dimensions.
- In quirks mode I had to use a couple of workarounds to prevent the resizer from entering an endless loop. This is documented in the code itself.
The following snippet would have to be placed anywhere in the document body. This is how you would use DYNIFS for your IFrames:
<iframe width="100%" height="500"
style="width:100%;height:500px;border:1px dotted #BEBEBE;">
Sorry, your browser doesn't seem to support IFrames!
- id and name: You should use a unique value (within the scope of the current document). The same name for both attributes.
- onload: This is where we call DYNIFS.resize(). It just takes a single argument, the name that we have just set in the id and name attributes. Simple, isn't it?
- src: This is the URL of the document that will be rendered within the IFrame.
- scrolling="no" is not really necessary, but it may prevent from viewing the scrollbars in certain circumstancies.
- Anything else? Not really. Well, it depends on what you need. For example, I have used the style attribute here. Too lazy to touch the overall CSS definitions of the site ;-)
Cross-scripting between different subdomains
// If the main document is located at www.example.com
// If the IFrame'd document is located at subdomain.example.com
// You can do this is both documents! ;-)
document.domain = 'example.com';
DYNIFS should work on any DOM capable browser. It has been successfully tested with MSIE 6, Firefox 1.5 (Windows and Mac), Opera 8.5 (Windows) and Safari 2.0.3 (Thanks, Eldritch ;-). If you are using a different browser, please, let me know whether it works for you too, so I can update the list. ;-)
Questions, comments, suggestions?
Please, use the forums. Thanks ;-)
IFrame height auto resize