获取浏览器高度的问题

昨天晚上为了实现弹出一个窗口后，让界面除了窗口外的地方都失效，所以想到在弹出窗口的底部增加一层，让其透明度小一些，比如为20%，然后让这个曾充满整个屏幕，这样的话，虽然能看到除了窗口以外的任何地方，但是却不能点击。

这自然就需要获取窗口的大小了，以前也做过这样类似的效果，记得当时用document.body.clientWidth/clientHeight就可以获取了，不过昨天晚上一测试，每次都是clientWidth可以正常获取，而clientHeight每次都返回0。后来，对比了一下以前的代码，发现以前没有采取3C规范，是不是这个原因呢？于是把代码中关于文档类型以及规范标准的声明的代码去掉了

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

然后一试，果然就可以了，看来3C对于代码的规范影响还是蛮大的。

不过现在一点也不想做不符合标准的网站了，所以还是要加入这行声明的。加入后，试了好多种办法，总是搞不定，没办法，先搁着吧。

今天用google.cn搜索了一下，第一篇文章是English的，但还是带着微弱的自信和好奇打开了，不过还好，基本上能看懂了。一看之下，发现这学问还真不少。

这个网页的地址是：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

下面的内容有的是翻译过来的，有的则是直接引用其代码。

原来常用的关于当前浏览器网页显示窗口大小的函数有三种，分别如下：

window.innerHeight/Width: 很多浏览器都支持，但是IE却不支持！
document.body.clientHeight/Width: 大部分浏览器（包括IE）都支持！
document.documentElement.璫lientHeight/Width: 很多支持DOM的浏览器都支持，包括IE！

clientWidth/Height属性显得有些混乱，因为对于不同的浏览器，它代表着不同的意思，而且更为可怕的是，即使对于同一个浏览器，如果其对于文档类型的声明不同（比如strict模式或者quirks模式），它所代表的含义也不尽相同。有时候它门表示window窗口大小，有时候则表示document的大小。下面的表格表明了它们在不同浏览器和不同模式下的不同含义：

Opera 7+	window	window	document
Mozilla	window	window	document
KHTML	window	window	document
iCab	window	window	N/A
Opera 6	window	window	N/A
IE 4	N/A	window	N/A
IE 5-6 quirks	N/A	window	0
IE 6 strict	N/A	document	window
ICEbrowser	window	window	document
Netscape 4	window	N/A	N/A

下面就是获取窗口大小的函数：

function alertSize() {

var myWidth = 0, myHeight = 0;

if( typeof( window.innerWidth ) == 'number' ) {

    //Non-IE

    myWidth = window.innerWidth;

    myHeight = window.innerHeight;

} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

    //IE 6+ in 'standards compliant mode'

    myWidth = document.documentElement.clientWidth;

    myHeight = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    //IE 4 compatible

    myWidth = document.body.clientWidth;

    myHeight = document.body.clientHeight;

}

window.alert( 'Width = ' + myWidth );

window.alert( 'Height = ' + myHeight );

}

另外，该文还介绍了一个有关浏览器滚动条的属性值在不同浏览器下的区别。

当咱们要做一些特效，比如雪花下落，或者让某一个菜单保持在同一个位置而不碎滚动条变化时，就需要获取浏览器滚动条当前相对于屏幕的位置。

其函数如下：

posted on 2010-06-09 12:02 crazygirl 阅读(2150) 评论(0) 收藏举报

刷新页面返回顶部

获取浏览器高度的问题

公告