js获取浏览器高度和宽度值,尽量的考虑了多浏览器

凡是在检索和数据分析方面饰演着重要脚色,这些独霸可能会导致机能降低。现实上有些独霸是完整没有需要的,出格是从数据库中重复检索一些 常用的静态数据。不妨考虑一下短期独霸 Memcached extension来缓存数据。Memcached的扩年夜年夜缓存与libMemcachedReading Glasses with Case库协同工作,在RAM中缓存数据,也承诺用户界说缓存的刻日,有 助于确保用户信息的实时更新。

尊重真理的人是最聪慧的人。用到了,找了材料,先前收拾过不外不全。

不惜逝世,朝得成功js获取浏览器高度和宽度值,尽量的考虑了多浏览器。


IE中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
FireFox中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
Opera中: 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面临象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面临象高度(即BODY对象高度加上Margin高) 
没有界说W3C的尺度,则 
IE为: 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为: 
document.documentElement.clientWidth ==> 页面临象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面临象高度(即BODY对象高度加上Margin高) 
Opera为: 
document.documentElement.clientWidth ==> 页面临象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面临象高度(即BODY对象高度加上Margin高) 


网页可见区域宽: document.body.clientWidth 
网页可见区域高: document.body.clientHeight 
网页可见区域宽: document.body.offsetWidth (包含边线的宽) 
网页可见区域高: document.body.offsetHeight (包含边线的高) 
网页正文全文宽: document.body.scrollWidth 
网页正文全文高: document.body.scrollHeight 
网页被卷往的高: document.body.scrollTop 
网页被卷往的左: document.body.scrollLeft 
网页正文部门上: window.screenTop 
网页正文部门左: window.screenLeft 
屏幕分辨率的高: window.screen.height 
屏幕分辨率的宽: window.screen.width 
屏幕可用工作区高度: window.screen.availHeight 
屏幕可用工作区宽度: window.screen.availWidth 

HTML精断定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左鸿沟和窗口中今朝可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的打算左侧地位 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的打算顶端地位 
event.clientX 相对文档的程度座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的程度坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直标的目的滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的程度座标+垂直标的目的滚动的量 
实现代码 

制代码代码如下:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.g/1999/xhtml"> 
<head> 
<title>请调剂浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</meta></head> 
<body> 
<h2 align="center">请调剂浏览器窗口巨细</h2><hr /> 
<fm action="#" method="get" name="fm1" id="fm1"> 
<!--显示浏览器窗口的现实尺寸--> 
浏览器窗口 的 现实高度: <input type="text" name="availHeight" size="4"/><br /> 
浏览器窗口 的 现实宽度: <input type="text" name="availWidth" size="4"/><br /> 
</fm> 
<script type="text/javascript"> 
<!-- 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 

//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//经由过程深进Document内部对body进行检测,获取窗口巨细 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 

winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 

//成效输出至两个文本框 
document.fm1.availHeight.value= winHeight; 
document.fm1.availWidth.value= winWidth; 

findDimensions(); 
//挪用函数,获取数值 
window.onresize=findDimensions; 
//--> 
</script> 
</body> 
</html> 
 

MRMY

原文地址:https://www.cnblogs.com/zjx2011/p/2547856.html