用js小类库获取浏览器的高度和宽度信息


Posted in Javascript onJanuary 15, 2012

因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息。在实现这个要求之前,先来看看在js中有哪些工具可以让我们使用:

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth + " (包括边线和滚动条的宽)";
网页可见区域高:document.body.offsetHeight + " (包括边线的宽)";
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页被卷去的高(ff): document.body.scrollTop;
网页被卷去的高(ie):document.documentElement.scrollTop;
网页被卷去的左:document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度: window.screen.availWidth;
你的屏幕设置是  window.screen.colorDepth +" 位彩色";
你的屏幕设置  window.screen.deviceXDPI +" 像素/英寸";

 

这段资料来源于网络,看到这么多的相似的概念时我已经疯掉了,但处于技术人的执着,我还是顽强的看完了并做了一些理解。经过自己的理解和吸收之后,我觉得如果我每次想获取一个高度或者宽度信息时我会抓狂的,因此,我对浏览器的这些属性做了一些整理和抽象,按照这样的三个对象来剥离这么多的相似的属性,第一个是页面,第二是窗口,第三个是视口。来看图片理解我的这三个对象的含义吧:

用js小类库获取浏览器的高度和宽度信息

对这三个概念做一个解释:

页面:就是我们制作出来的网页的页面的一个抽象,他的高度通常比我们的浏览器的高度要高,宽度通常是小于等于我们的浏览器宽度

浏览器窗口:就是我们使用的浏览器的一个抽象,他包含了菜单栏、工具栏、书签栏、状态栏、页面显示区等。因此他的高度绝对大于等于视口的高度,宽度绝对大于等于视口的宽度

视口:就是浏览器中显示页面的区域

有了这三个概念铺底,我们来写个小类库,获取这个“对象”的高度和宽度等信息吧:

var Browser = { 
}; 
//页面 
Browser.Page = (function () { 
return { 
scrollTop: function () { 
return Math.max(document.body.scrollTop, document.documentElement.scrollTop); 
}, 
scrollLeft: function () { 
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft); 
}, 
height: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.scrollHeight; 
} else { 
_height = document.body.scrollHeight; 
} 
return _height; 
}, 
width: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.scrollWidth; 
} else { 
_width = document.body.scrollWidth; 
} 
return _width; 
} 
}; 
})(); 
//窗口: 
Browser.Window = (function () { 
return { 
outerHeight: function () { 
var _hei = window.outerHeight; 
if (typeof _hei != "number") { 
_hei = Browser.ViewPort.outerHeight(); 
} 
return _hei; 
}, 
outerWidth: function () { 
var _wid = window.outerWidth; 
if (typeof _wid != "number") { 
_wid = Browser.ViewPort.outerWidth(); 
} 
return _wid; 
}, 
innerHeight: function () { 
var _hei = window.innerHeight; 
if (typeof _hel != "number") { 
_hei = Browser.ViewPort.innerHeight(); 
} 
return _hei; 
}, 
innerWidth: function () { 
var _wid = window.innerWidth; 
if (typeof _wid != "number") { 
_wid = Browser.ViewPort.innerWidth(); 
} 
return _wid; 
}, 
height: function () { 
return Browser.Window.innerHeight(); 
}, 
width: function () { 
return Browser.Window.innerWidth(); 
} 
} 
})(); 
//视口: 
Browser.ViewPort = (function () { 
return { 
innerHeight: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.clientHeight; 
} else { 
_height = document.body.clientHeight; 
} 
return _height; 
}, 
innerWidth: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.clientWidth; 
} else { 
_width = document.body.clientWidth; 
} 
return _width; 
}, 
outerHeight: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.offsetHeight; 
} else { 
_height = document.body.offsetHeight; 
} 
return _height; 
}, 
outerWidth: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.offsetWidth; 
} else { 
_width = document.body.offsetWidth; 
} 
return _width; 
}, 
width: function () { 
return Browser.ViewPort.innerWidth(); 
}, 
height: function () { 
return Browser.ViewPort.innerHeight(); 
} 
} 
})();

做几点说明:
1、已经能支持获取多浏览器的内部的视口的宽度和高度信息
2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样,已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的,因此在这样的情况下,我将视口和窗口的概念等同起来了。
2、虽然window有宽度和高度信息,但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。
实例演示:
在一个垂直内容过多的页面中,使一个DIV总能保持在视口的中心位置(非精确中心位置):
代码:
window.onload = window.onresize = function () { 
var top = Math.round(Browser.Page.scrollTop() + (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2)); 
var left = Math.round(Browser.Page.scrollLeft() + (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2)); 
document.getElementById("divCenter").style.top = top + "px"; 
document.getElementById("divCenter").style.left = left + "px"; 
}

大家测试时可以采用改变窗口大小的方式来查看。
时间不早了,晚安!
源代码下载查看
Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
js返回顶部实例分享
Dec 21 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 #Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 #Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 #Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 #Javascript
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
公司管理建议书范文
2014/03/12 职场文书
倡议书格式
2014/04/14 职场文书
募捐感谢信
2015/01/22 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
张丽莉观后感
2015/06/16 职场文书
警示教育观后感
2015/06/17 职场文书
辩论会主持词
2015/07/03 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
利用Java连接Hadoop进行编程
2022/06/28 Java/Android