IFrame Resize

JavaScript
1

Hi there,

I found a javascript code online which automatically resizes an IFRAME based on the content loaded into it. Mostly, it works as expected but there is one slight problem and I wonder if anyone could help me resolve it.

The code is here:



<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library ([Dynamic Drive DHTML(dynamic html) & JavaScript 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=["star_content"]

//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>

As you can see, the IFRAME I am resizing automatically is called “star_content” - This frame exists on a page with a set of links below it, which determine what content is to be loaded into it.

The content being loaded into it is Daily, Monthly and Yearly horoscopes. The longest being the Yearly one. Now when I click the yearly one, the iframe extends as expected… but if I go from the yearly one back to the Daily or Monthly one, it doesn’t shrink again so I end up with a huge gap.

I hope I’m explaining this correctly. I can’t show you the page itself because it’s a closed site, still in development and I am under a non disclosure contract. However, here is the IFRAME HTML.

<iframe id="star_content" name="star_content" width="600px" scrolling="no" frameborder="0" src="http://localhost/aquarius_today.php"></iframe>

And here is the HTML for the links that change the IFRAME content.

<a href="aquarius_yesterday.php">Yesterday</a>  |  Today  |  <a href="aquarius_tomorrow.php">Tomorrow</a><br />
Daily  |  <a href="aquarius_monthly.php">Monthly</a>  |  <a href="aquarius_yearly.php">Yearly</a>  |  <a href="aquarius_financial.php">Financial Horoscope</a>

So to sumarise, what I want to do is have the iframe automatically resize to fit the content that has been loaded within it. It’s doing that when it needs to extend the height of the frame but it’s not then reducing the height when it goes back to something smaller.

Is there a way I can fix this?

2

HI CBResources, i think this could be happening because when you go back the event “onload” or “load” do not fires, the page you are going back to was allready loaded and the event will not fire.

One solution may be having a function that checks every 2 secs for exemple if de .src of the iframe is the same, if not, execute the functions that resize the iframe.

See you :cool:

3

That’s always hazardous. I would remove all traces of that code and then it’s as simple as this:

<iframe src='myfile.htm' id='if1' onload='setIframeHeight( this.id )'></iframe>


<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }
 
 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;
  
  /* For width resize, enable below.  */
  
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

</script>