JavaScript Forum

**Learnin' n00b** · 05-23-2011, 05:47 PM

I have a page on one of my sites that needs to show another of my sites in it, kind of like how about.com does it... Anyway, I tried following these instructions to dynamically change an iframe's height, but couldn't get it to work: http://www.mattcutts.com/blog/iframe...llbar-example/

Here is the code:

Code:

<html>
<head> <title>Parent frame</title> 
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
</script>

</head>

<body onload="resizeFrame(document.getElementById('childframe'))" bgcolor="#cccccc">



<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>

<p>
<iframe frameborder=0 border=0 src="http://www.google.com" name="childframe" id="childframe" width="100%">
</iframe>
</p>

</body>
</html>

Any idea why it's not working?

**Learnin' n00b** · 05-23-2011, 06:57 PM

I don't really know anything about javascript, but I've been trying to figure out the problem and changed the code to this:

Code:

<html>
<head> 

<title>Parent frame</title> 

<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrame(f) {
alert('alert1');
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
alert('alert2');
}
</script>

</head>

<body onload="resizeFrame(document.getElementById('childframe'))" bgcolor="#cccccc">

<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>

<p>
<iframe frameborder=0 border=0 src="http://www.google.com" name="childframe" id="childframe" width="100%">
</iframe>
</p>

</body>
</html>

As you can see, I added two alert boxes in the function. The first one pops up, but the second one does not. Does this mean that this line is causing a problem?:

Code:

f.style.height = f.contentWindow.document.body.scrollHeight + "px";

**lizciz** · 06:00 AM

Yes, that's what is means.
I'm no javascript expert myself, but I'm *guessing* that different browsers has different support (perhaps has another name for the same thing or different spelling) for contentWindow or scrollHeight. So try to isolate the error by continuing your debugging.
Try to simplify that line, for example:

f.style.height = "200px";

If that works, the error lies in the right hand side of the equality sign.