javascript獲取視窗大小例項程式碼

antzone發表於2017-03-13
JavaScript

在實際的應用中，有時候需要實時的獲取視窗的大小，或者說需要知道視窗的大小，以便於下一步的操作，下面就通過一個簡單的程式碼例項簡單介紹一下如何實現此功能，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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; 
  }
  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; 
} 
window.onload=function(){
  findDimensions();
  window.onresize=findDimensions;
}
</script> 
</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> 
</body> 
</html>

以上程式碼實現了我們的需求，當調整視窗大小的能夠實時獲取視窗的尺寸，下面就介紹一下實現過程:

一.實現原理:

本章節程式碼是引用於網路，看上去有這麼多的程式碼，其實很多都是無用的，有些相容性處理完全可以不要，findDimensions()函式中只保留以下的程式碼就可以了:

[JavaScript] 純文字檢視 複製程式碼
function findDimensions(){ 
  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; 
}

原理一目瞭然，就是獲取clientHeight屬性返回值即可。

相關閱讀:

1.window.innerWidth屬性可以參閱window.innerwidth一章節。

2.clientWidth屬性可以參閱javascript clientWidth一章節。

相關文章