< Back

Document Subject: Altering Iframe height depending on content
Hint Short Cut: Add this to your code & documentation to help you find this page.
http://#IframeHeight or http://A555F9/nn.nsf/ByAlias/IframeHeight

Iframes are quite cool if you want to change the content of a page without altering the borders or navigator. This code changes the size of the iframe each time the content is reloaded to avoid scroll bars.




Hope this makes sense:

Put this in the JSHeader of the document hosting the iframe.

function iFrameHeight(iframeid) {
  // used by iframes to adjust size to content
  if(document.getElementById && !(document.all))
 {
    h = document.getElementById(iframeid).contentDocument.body.scrollHeight;
    document.getElementById(iframeid).style.height = h;
  }
  else if(document.all)
 {
    h = document.frames(iframeid).document.body.scrollHeight;
    document.all[iframeid].style.height=h;
  }
}

 

<iframe onLoad="iFrameHeight();"id="content" name="content" width="610px"  align="left" frameborder="no" scrolling="no" src="t_main.asp">&nbsp;</iframe>

This code may go into a computedtext value:

DBName := @Implode(@Explode(@Subset(@DbName;-1); @Char(92));"/");
url:="/"+DBName+"/DocumentsByUser?openview&count=5&restricttocategory="+@URLEncode("Domino"@Name([CN];@UserName));

"<IFRAME  onLoad=\"iFrameHeight('MyDociframe');\" id='MyDociframe' name='MyDociframe' height=106 width=712  frameborder=0 marginwidth=0 marginheight=0  src='"+url+"'>"+
"Try <a href='"+url+"'>here</a>"+
"</IFRAME>"

 

Update This will resize the frame from inside the frame, useful if code runs in the iframe.

function iFrameHeight(iframeid) {
 // used by iframes to adjust size to content
 if(document.getElementById && !(document.all))
 {
   h = parent.document.getElementById(iframeid).contentDocument.body.scrollHeight;
   parent.document.getElementById(iframeid).style.height = h;
 }
 else if(document.all)
 {
   h = parent.document.frames(iframeid).document.body.scrollHeight;
   parent.document.all[iframeid].style.height=h;
 }
}