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

 更新时间:2012年01月15日 22:26:09   作者:  
在做项目时碰到了要在页面上显示一个浮动DIV层的效果。本来做的是在页面居中时显示的,但后来经过自己的测试发现,当网页中出现了滚动条之后,那个浮动的DIV却还是在页面的顶部显示的
因此当用户在一个较长内容的网页中点击某一个按钮显示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 +" 像素/英寸";

 

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

浏览器三层

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

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

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

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

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

复制代码 代码如下:

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";
}

大家测试时可以采用改变窗口大小的方式来查看。
时间不早了,晚安!
源代码下载查看

相关文章

  • 如何使用JS console.log()技巧提高工作效率

    如何使用JS console.log()技巧提高工作效率

    这篇文章主要介绍了如何使用JS console.log()技巧提高工作效率,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript的变量声明提升问题浅析(Hoisting)

    JavaScript的变量声明提升问题浅析(Hoisting)

    大家应该都只奥javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多,这篇文章将再次谈谈关于这方面的问题,有需要的朋友们可以参考借鉴。
    2016-11-11
  • 基于js中style.width与offsetWidth的区别(详解)

    基于js中style.width与offsetWidth的区别(详解)

    下面小编就为就大家带来一篇基于js中style.width与offsetWidth的区别(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • ECMAScript中迭代器的深入讲解

    ECMAScript中迭代器的深入讲解

    在ECMAScript 6增加了一个对象,它不是新的语法或新的内置对象,而一种协议( 迭代器协议),所有遵守这个协议的对象,都可以称之为迭代器,这篇文章主要给大家介绍了关于ECMAScript中迭代器的相关资料,需要的朋友可以参考下
    2021-08-08
  • 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变opacity实现透明度渐变功能相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 利用图片的 onerror 事件载入默认图片

    利用图片的 onerror 事件载入默认图片

    当图片不存在时载入默认图片的代码
    2009-12-12
  • javascript 兼容所有浏览器的DOM扩展功能

    javascript 兼容所有浏览器的DOM扩展功能

    技术文章写得少,所以有时候想写点什么却下不了手,不知道该写什么;往往到了准备要写的时候才发现自己想写的东西其实很无聊,甚至觉得很幼稚,于是又关掉了编缉器
    2012-08-08
  • 手机软键盘弹出时影响布局的解决方法

    手机软键盘弹出时影响布局的解决方法

    这篇文章主要介绍了手机软键盘弹出时影响布局的解决方法的相关资料,大家开发移动端的软件时候,肯定会因为软键盘的弹窗影响布局,这里说下如何解决,需要的朋友可以参考下
    2016-12-12
  • 一文详解如何处理JavaScript中的NaN

    一文详解如何处理JavaScript中的NaN

    在 JavaScript 中,NaN(Not-a-Number)表示一个无效的数字值,通常,它出现在尝试将无法转换为数字的值与数字进行运算时,本文主要来聊聊如何处理JavaScript中的NaN,感兴趣的可以了解下
    2025-01-01
  • javascript天然的迭代器

    javascript天然的迭代器

    有一个数n=5,不用for循环,怎么返回[1,2,3,4,5]这样一个数组
    2010-10-10

最新评论