Resizing an iFrame to it’s parent

In some cases it’s not possible to use the style tags width and height to define the size of an object on a web page. This is typically the case when an inline frame is placed within a placeholder such as a <div> or a <td>. My approach to resolve this is to include a javascript which resizes the iframe based on it’s parents width and height.

The script is based on a Sharepoint 2007 collaboration page template and has a static reference to the page footer. If this should be used elsewhere, please modify the static object references in the code.

function resizeFrame() {
   objFrame = document.getElementsByTagName("iframe").item(0);
   windowHeight = document.body.offsetHeight;
   headerHeight = absoluteTop(objFrame);
   iframeHeight = windowHeight - (headerHeight + footerHeight);
   if (iframeHeight >=0) { objFrame.style.height = iframeHeight};
   objFrame.style.border = "1px solid gray";
   objFrame.style.margin = "0px";
}

function absoluteTop(objNode) {
   var currentNode=objNode;
   var sumTop=0;
   while(currentNode.tagName!="BODY"){
      sumTop+=currentNode.offsetTop;
      currentNode=currentNode.offsetParent;
   }
   return sumTop;
}   function getFooterHeight() {
   objPlaceHolder = document.getElementById("ctl00_MSO_ContentDiv");
   footH = document.body.offsetHeight - (absoluteTop(objPlaceHolder) + objPlaceHolder.offsetHeight);
   return footH;
}

var footerHeight = 30;
window.attachEvent ("onresize", resizeFrame);
window.attachEvent ("onload", resizeFrame);

N’Joy!

Advertisement