Iframe dynamic resizing - resize to the height of the content
Posted by admin on June 12 2009 10:58:09

Iframe dynamic resizing - resize to the height of the content


IE4+ and NN6 can adjust the dimensions of elements including iframe
elments dynamically.
The onload handler of the body of the document in the iframe has to
call a function in the parent window which then adjusts the size.

This does not include the margin of the body element inside the frame in
the first case (iframwWindow.document.height). I don't know about the
other cases. The easiest thing is to make the margins 0 in the framed
subdocument, and control the layout in the enclosing document's iframe
element. But, that won't handle borders and such properly.

Here is the document containing the iframe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
adjusting iframe size
</title>
<script type="text/javascript">
function adjustIFrameSize (iframeWindow) {
if (iframeWindow.document.height) {
var iframeElement = document.getElementById
(iframeWindow.name);
iframeElement.style.height = iframeWindow.document.height + 'px';
iframeElement.style.width = iframeWindow.document.width + 'px';
}
else if (document.all) {
var iframeElement = document.all[iframeWindow.name];
if (iframeWindow.document.compatMode &&
iframeWindow.document.compatMode != 'BackCompat')
{
iframeElement.style.height =
iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
}
else {
iframeElement.style.height =
iframeWindow.document.body.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.body.scrollWidth + 5 + 'px';
}
}
}
</script>
</head>
<body>
<h2>self adjusting iframe</h2>
<hr>
<iframe name="iframeName" id="iframeName"
marginwidth="0" marginheight="0"
src="test20020403.html"><a
href="test20020403.html">page</a></iframe>
<hr>
</body>
</html>

Note that the <iframe> tag has both name and id attribute set to the
same value. This is necessary to allow the iframe window object to
find the corresponding <iframe> element.

Here is the example test page (test20020403.html) which creates a page
with random length. For your own iframe pages you need to copy the
onload handler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
test document which has random length
</title>
</head>
<body onload="if (parent.adjustIFrameSize)
parent.adjustIFrameSize(window);"
>
<script type="text/javascript">
var lines = Math.floor(Math.random() * 100) + 25;
for (var i = 0; i < lines; i++)
document.write(i + ' Kibology<br \/>');
</script>
</body>
</html>



It would be nice to know what browsers those different cases are there
to handle. I traced through it on Firefox 2.0.2 and it took the first
case: iframwWindow.document.height does exist. Please add data, or fill
in if you know.

Other method for resize of iframe

*The page with an iframe

<html>
    <head>
        <tittle>Iframe Resizing</title>
        <script type=”text/javascript” src=”resize.js”></script>
        </head>
    <body>
        <iframe width=”100%” height=”100%” scrolling=”auto” id=”iframe” name=”iframe” frameborder=”0″ src=”SOMETHING.HTML” /></iframe>
        <script type=”text/javascript” language=”JavaScript”>
        new Resize();
        </script>
    </body>
</html>

*The Prototype based javascript (resize.js )

function Resize() {
this.init();
}
Resize.prototype = {
init: function() {
var userAgent = new String(navigator.userAgent).toLowerCase();

if (userAgent.indexOf(”msie”, 0) > 0) {//Only call it on IE
Event.observe(window, ‘load’, this.resizeIFrame.bindAsEventListener(this)); //This is where the magic happens
}
},

resizeIFrame: function() { 
var frame = $(’iframe’); 
var renderedDocumentHeight = frame.contentWindow.document.body.scrollHeight; 

if (renderedDocumentHeight < 600) {      
renderedDocumentHeight = 600;//Set a minimum height in case the document is really small

frame.height = renderedDocumentHeight;
}
}

Eliminate Scrollbars in sControls


Many new salesforce.com AJAX developers ask me how I am able to build my sControls into a frame and get the sizing setup in such a manner to prevent scrollbars. Over the years I've tried many different JavaScript functions but found that one works better than any I've seen.

For those reading this that might be unfamiliar with what I'm referring too I've included a screenshot.

In some instances an AJAX developer may want to build a sControl into salesforce.com whereby the sControl is embedded into the page. Basically there are tabs at the top and the navigation bar on the left-hand side with the sControl on the right-hand side.

When the web tab containing a sControl is setup through the Salesforce.com user interface the developer is allowed to dictate the size of the frame in which the sControl gets loaded. In most cases these new developers will simply alter that frame size to account for the largest height that may occur in the sControl. However, the script that I will eventually share with you will allow these developers to now ignore this pixel height setting and resize the frame dynamically.

I started using the script a year or two ago and a few months ago I altered it a bit because I was still getting scrollbars in Firefox. I found that the scrollbars didn't always occur but I wanted to account for the percentages and try to eliminate them in entirely. Therefore, I decided to add a line where I determine if the browser is Firefox and then add 10 pixels to the adjusted frame height. I found that this truly eliminates the vertical scrollbars in almost 100% of the instances where I've used this script.

So let's get to it. The script itself is:

//resizes the frame holding the sControl to make up for odd dimensions
function resizeFrame() {
var sframe = parent.document.getElementById("itarget"); //get id of iframe from parent
if (navigator.userAgent.indexOf("Firefox") != -1) { //if Firefox
var nHeight = document.body.scrollHeight+10; //add ten pixels to height of sControl frame
} else { //otherwise
var nHeight = document.body.scrollHeight; //use the returned height of sControl frame
}
sframe.style.height = nHeight+"px"; //set the frame height to correspond to the content

}


resizeFrame(); //calls function from above