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>

上面的代码实现了我们的要求,可以获取当前浏览器窗口的尺寸,直接套用就可以了。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容