Entry
How to size an IFRAME according to its content?
Mar 24th, 2009 17:01
chat alarab, John Dlugosz, Keith G, Martin Honnen,
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.
http://www.ksa-123.com
http://www.ksa-2000.com
http://www.chat-kuwait.com
http://www.vip-kuwait.com
http://www.chat-3rb.com
http://www.vip-3rb.com
http://www.3rb-chat.com
http://www.vipgulf.com
http://www.chat-gulf.com
http://www.vip-gulf.com
