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

JavaScript 获取浏览器窗口的大小

2012-08-14 15:51 453 查看

程序演示：

获取浏览器当前窗口大小。当浏览器窗口大小变化时，显示的值会随时变化。

浏览器窗口的实际宽度:

浏览器窗口的实际高度:

程序主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下：

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素<html>的尺寸，而不是<body>元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的<body>标签。Document对象的documentElement属性则表示 HTML文档的根节点。

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

JavaScript Code 

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;

// 通过深入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;


程序实现步骤：

程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

（强烈推荐，源文：http://www.nowamagic.net/javascript/js_GetBrowserSize.php）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航