Auto iframe Height or an iframe to Fit it's Content

Introduction

Getting an iframe to fit it's content has been a on going problem. On numerous forums there are dead topics on how to get an iframe to fit it's content. So i decided to make an article on how to do this. The following will include: what is required, where to place the 'Auto iframe Height' script and finally how to configure it to suit you.

What is Required

You should have some understanding of html.
( if you have problems i am happy to help you in the forums )

The script and where to place the 'Auto iframe Height' script.

There are two parts to make an iframe fit it's content. They are as follows.

The following code is the script. It should be placed in the <head> tag.

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

The following code is the html code. It should be placed in the <body> tag, where appropriate

Any problems?

Trouble shooting:

1. Make sure "myframe" in "var iframeids=["myframe"]" is the same as the id on your iframe code.

2. Still having problems? - Post in the forum for help.

Thank you to..

I would like to recognize "Dynamic Drive DHTML code library" for this script, they have done very well to put together this script. If you would like to browse their other scripts goto:
"Dynamic Drive DHTML code library".

IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
Visit DynamicDrive.com for hundreds of original DHTML scripts

Comments

Warning: include(comment.php) [function.include]: failed to open stream: No such file or directory in /home/htmlsnet/public_html/web-articles/resize-iframe-height.html on line 144

Warning: include(comment.php) [function.include]: failed to open stream: No such file or directory in /home/htmlsnet/public_html/web-articles/resize-iframe-height.html on line 144

Warning: include() [function.include]: Failed opening 'comment.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/htmlsnet/public_html/web-articles/resize-iframe-height.html on line 144

main navigation

html tutorials

html references

html tag reference

Useful Links

Free Domain Names

Free Hosting with 99.9% Uptime

best web-browser