js獲取瀏覽器視窗尺寸程式碼例項

antzone發表於2017-04-10
JS瀏覽器

本章節分享一段程式碼例項，它實現了獲取瀏覽器視窗尺寸的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面的程式碼實現了我們的要求，可以獲取當前瀏覽器視窗的尺寸，直接套用就可以了。

相關文章