您的位置：首页 > Web前端 > JavaScript

Javascript获取各种浏览器可见窗口大小

2009-09-18 13:07 671 查看

搞了大半天，总算弄明白了为何用document.body.clientHeight，document.body.offsetHeight都没有办
法获取网页可见区域的正确值，原来罪魁祸首是W3C定义的标准！！在新定义出来的标准下
document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见
窗口大小这方面的差别：

<scrīpt>

function getInfo()

{

var s = "";

s += " 网页可见区域宽："+ document.body.clientWidth;

s += " 网页可见区域高："+ document.body.clientHeight;

s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";

s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";

s += " 网页正文全文宽："+ document.body.scrollWidth;

s += " 网页正文全文高："+ document.body.scrollHeight;

s += " 网页被卷去的高(ff)："+ document.body.scrollTop;

s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;

s += " 网页被卷去的左："+ document.body.scrollLeft;

s += " 网页正文部分上："+ window.screenTop;

s += " 网页正文部分左："+ window.screenLeft;

s += " 屏幕分辨率的高："+ window.screen.height;

s += " 屏幕分辨率的宽："+ window.screen.width;

s += " 屏幕可用工作

区高度："+ window.screen.availHeight;

s += " 屏幕可用工作区宽度："+ window.screen.availWidth;

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

//alert (s);

}

getInfo();

</scrīpt>

在我本地测试当中：

在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight

即可获得，很简单，很方便。

而在公司项目当中：

Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">

如果在页面中添加这行标记的话

在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高）

原文地址：http://www.css88.com/article.asp?id=133

判断浏览器的类型：

var ua = navigator.userAgent.toLowerCase ();

var ōs = new Object();

os.isFirefox = ua.indexOf ("gecko") != -1;

os.isOpera = ua.indexOf ("opera") != -1;

os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

获取浏览器区域的大小：
//

// getPageScroll()

// Returns array with x,y page scroll values.

// Core code from - quirksmode.org

//

function getPageScroll(){

var yScroll;
if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict

yScroll = document.documentElement.scrollTop;

} else if (document.body) {// all other Explorers

yScroll = document.body.scrollTop;

}
arrayPageScroll = new Array('',yScroll)

return arrayPageScroll;

}

//

// getPageSize()

// Returns array with page width, height and window width, height

// Core code from - quirksmode.org

// Edit for Firefox by pHaez

//

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}
// for small pages with total width less then width of the viewport

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}
原文地址：http://dakular.spaces.live.com/Blog/cns!8668FFEC49BC51CE!440.entry

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航