Suppose you want to include a child iframe on your page. You’d like to resize the height of the child iframe so that it doesn’t show a scrollbar. That is, you want something that looks like this:
Here’s one way you can do it. First, make the iframe that you want to include. I made a file “child-frame.html” that looks like this:
<html>
<head> <title>Child frame</title> </head>
<body bgcolor=”#000000″><font color=”#ffffff”>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
<p>Child frame.</p>
</font></body>
</html>
Now in the parent frame, you can make code like this:
<html>
<head> <title>Parent frame</title> </head><body onload=”resizeFrame(document.getElementById(‘childframe’))” bgcolor=”#cccccc”>
<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><p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p><p>
<iframe frameborder=0 border=0 src=”./child-frame.html” name=”childframe” id=”childframe”>
</iframe>
</p></body>
</html>
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
You must be logged in to post a comment.