js获取浏览器窗口尺寸代码实例
分类：实例代码
本章节分享一段代码实例，它实现了获取浏览器窗口尺寸的功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<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;
}
// 通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// 结果输出至两个文本框
document.forms[0].availHeight.value = winHeight;
document.forms[0].availWidth.value = winWidth;
}
window.onresize = findDimensions;
window.onload = function () {
// 调用函数，获取数值
findDimensions();
}
</script>
</head>
<body>
<form>
<input id="availHeight" name="availHeight" type="text"/>
<input id="availWidth" name="availWidth" type="text" />
</form>
</body>
</html>
上面的代码实现了我们的要求，可以获取当前浏览器窗口的尺寸，直接套用就可以了。