javascript得到浏览的可用高度

最新推荐文章于 2024-10-11 17:39:47 发布

春馨梦

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量299

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.第一个页面 max1

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MaxHeight setting </title>
<script type="text/javascript">
   function screenInfo(){
    var  s = "";
   s += "\r\n网页可见区域宽："+ document.body.clientWidth;
   s += "\r\n网页可见区域高："+ document.body.clientHeight;
   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
   s += "\r\n网页正文全文高："+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高："+ document.body.scrollTop;
   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
   s += "\r\n网页正文部分上："+ window.screenTop;
   s += "\r\n网页正文部分左："+ window.screenLeft;
   s += "\r\n屏幕分辨率的高："+ window.screen.height;
   s += "\r\n屏幕分辨率的宽："+ window.screen.width;
   s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
   s+="\r\n 网页的可见高度："+top.document.documentElement.clientHeight;
   s+="\r\n 网页的可见宽度："+top.document.documentElement.clientWidth;
   alert(s);
}
</script>  
</head>
<body>
     <input type="button" οnclick="screenInfo()" value='计算屏幕参数'/> 
				 <iframe   style="background:#33FF33;width:400px;height:400px;" >
					     
				 </iframe>
</body>
</html>

2.第一个页面 max2

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MaxHeight setting </title>
<script type="text/javascript">
   function screenInfo(){
    var  s = "";
   s += "\r\n网页可见区域宽："+ document.body.clientWidth;
   s += "\r\n网页可见区域高："+ document.body.clientHeight;
   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
   s += "\r\n网页正文全文高："+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高："+ document.body.scrollTop;
   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
   s += "\r\n网页正文部分上："+ window.screenTop;
   s += "\r\n网页正文部分左："+ window.screenLeft;
   s += "\r\n屏幕分辨率的高："+ window.screen.height;
   s += "\r\n屏幕分辨率的宽："+ window.screen.width;
   s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
<span style="font-size:14px;color:#ff6666;">  <strong> s+="\r\n 网页的可见高度："+top.document.documentElement.clientHeight;
   s+="\r\n 网页的可见宽度："+top.document.documentElement.clientWidth;</strong></span>
   alert(s);
}
</script>  
</head>
<body>
     <input type="button" οnclick="screenInfo()" value='计算屏幕参数'/> 
				 <iframe   style="background:#33FF33;width:400px;height:400px;" >
					     
				 </iframe>
</body>
</html>