每日一JavaScript:获取浏览器窗口大小

以下内容摘自JavaScript相关书籍和网络,我感觉以现在的情况应该可以再简化些,牛人帮忙看下。
(1)要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是< body>元素。

(2)Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

(3)Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

(4)document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。(for IE6)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Available Region Checker</title>
</head>

<body>
<h2 align="center">请调整浏览器窗口大小</h2>
<hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口的高度:<input type="text" name="availHeight" size="4"><br />
浏览器窗口的宽度:<input type="text" name="availWidth" size="4" /><br />
</form>
<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;

/*nasty hack to deal with doctype swith in IE*/
//通过深入Document内部对body进行检测,获取窗口大小
if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}

//结果输出至两个文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

源程序解读

(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

(6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

演示页面请看这里


6 Responses to “每日一JavaScript:获取浏览器窗口大小”

  1. Yacca says:

    hgg不做皮了…开始研究js了么-.-

  2. RDEN says:

    我要慢慢研究!

  3. 山东百度优化(www.jinan-seo.com)
    呵呵 回家过年之前再来踩踩!过年好~

  4. 不懂js,看着不是很明白,博主可以做成可以让div引用的宽和高么?

Post a Comment