Is there any way to control the space between top of browser or frame
and document body?
What I have is this: There is a simple file test1.html, and file
test.html that displays test1.html in an iframe. On the iframe I set
marginheight and marginwidth to zero. But there is one line of blank
space between the top border of the iframe and the first line of
text. However, the iframe's content document's body's offsetHeight
gives the height without considering this extra space between the top
margin of the iframe and the body. As a result, when I set the
iframe's height to the offsetHeight through Javascript, it is not big
enough but one line. This is on Mozilla 2.0.
test1.html ==>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test1</title>
</head>
<body>
<p>Here is some text. Here is some text. Here is some text. Here is
some text. Here is some text. Here is some text. Here is some text.
Here is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here is
some text. Here is some text. Here is some text. Here is some text.
Here is some text. Here is some text. Here is some text. Here is some
text. END.</p>
</body>
</html>
test.html ==>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function changeFrameContents(newurl) {
var myframe = document.getElementById('myframe');
myframe.src = newurl;
}
</script>
<script type="text/javascript">
function myframeFullHeight() {
var frame = document.getElementById('myframe'); // iframe
var frameContent = frame.contentDocument;
var frameContentBody = frameContent.getElementsByTagName("body")
[0];
var height = frameContentBody.offsetHeight;
alert(height);
frame.height = height;
}
</script>
</head>
<body>
<h1>Heading</h1>
<iframe id="myframe" frameborder="1" scrolling="no"
marginheight="-10" marginwidth="0" src="test1.html"
style="display:block; margin-bottom:3em" onload="myframeFullHeight()">
</iframe>
<input type="button" value="test1"
onclick="changeFrameContents('test1.html');" />
<input type="button" value="test2"
onclick="changeFrameContents('test2.html');" />
<p/>
<input id="myinput" type="text" size="10" maxlength="10"
style="display:block"/>
<input type="button" value="resize" onclick="myframeFullHeight()"/>
</body>
</html>
