在开发基于WEB的管理系统或其它的应用，有时会需要把针对客户的视图固定为浏览的客户区一样的size，不用客户去拖拽浏览器的滚动条，这是我们需要在页面打开时取得浏览器的客户区size，然后根据取得的值用javaxcript调整页面的布局。
可以通过body.clientWidth和bocy.clientHeight来取得我们需要的值。但是经过实际调试发现调用它们的时机的不同，得到的值是不一样的。这里做个分析。
首先先写一段HTML代码作为用例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="aaa">DIV布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
body {
BACKGROUND: #000000;
MARGIN: 0px 0px 0px 0px;
TEXT-ALIGN: center;
width: 100%;
height: 100%
}
#demo {
BACKGROUND: #a5d854 ;
MARGIN: 0px 0px 0px 0px;
width: 2000px;
height: 800px
}
</style>
<script type="text/javascript">
function sizeOfBody(x)
{
var ss = "";
ss = "size of body(" + x + "): width:" + document.body.clientWidth + " height:" + document.body.clientHeight;
alert(ss);
}
</script>
</head>
<body onload="sizeOfBody('onload')">
<script type="text/javascript">
sizeOfBody("begin of body");
</script>
<div id="demo">
</div>
<script type="text/javascript">
sizeOfBody("end of body");
</script>
</body>
</html>
这里body的样式中width，height一定要是100%，因为我们是通过boby的属性来取得浏览器的客户区。
sizeOfBody函数是用来得到和显示客户区的size。
我们分别在三个位置调用sizeOfBody函数。
1. body的onload事件中；
2. <body></body>内的开始，即：<div></div>之前；
3. <body></body>内的结尾，即：<div></div>之后。
执行的结果先后为：
1. size of body(begin of body): width:1004 height:617
2. size of body(end of body): width:2000 height:800
3. size of body(onload): width:2000 height:800
第一个结果是真正的客户区size(1004*617)，即：浏览器的大小去掉了状态栏、地址栏、菜单栏、滚动条、边框等等剩下的专门显示网页的可见面积。后面的是已经加载了<div></div>后的size，body被"撑大了"，成了2000×800了。
No comments:
Post a Comment