JS獲取頁(yè)面窗口大小的代碼解讀

更新時(shí)間：2011年12月01日 23:41:23 作者：

本節(jié)實(shí)例給出一個(gè)獲取瀏覽器當(dāng)前窗口大小的方法。當(dāng)瀏覽器窗口大小變化時(shí)，顯示的值會(huì)隨時(shí)變化

本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對(duì)于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測(cè)窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素<html>的尺寸，而不是<body>元素。
Window對(duì)象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對(duì)象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽。Document對(duì)象的documentElement屬性則表示 HTML文檔的根節(jié)點(diǎn)。
document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>請(qǐng)調(diào)整瀏覽器窗口</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr> 
<form action="#" method="get" name="form1" id="form1"> 
<!--顯示瀏覽器窗口的實(shí)際尺寸--> 
瀏覽器窗口 的實(shí)際高度: <input type="text" name="availHeight" size="4"><br> 
瀏覽器窗口 的實(shí)際寬度: <input type="text" name="availWidth" size="4"><br> 
</form> 
<script type="text/javascript"> 
<!-- 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函數(shù)：獲取尺寸 
{ 
//獲取窗口寬度 
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; 
//通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && 
document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//結(jié)果輸出至兩個(gè)文本框 
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); //調(diào)用函數(shù)，獲取數(shù)值 
window.onresize=findDimensions; 
//--> 
</script> 
</body> 
</html> 

運(yùn)行該程序后，頁(yè)面出現(xiàn)兩個(gè)文本框，分別顯示窗口當(dāng)前的寬度和高度，。當(dāng)調(diào)整瀏覽器窗口大小時(shí)，文本框中的數(shù)值會(huì)隨之改變，分別是不同時(shí)刻窗口的大小。
源程序解讀
（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會(huì)隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。
（4）再通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小，并存儲(chǔ)在前述兩個(gè)變量中。
（5）在函數(shù)的最后，通過(guò)按名稱訪問(wèn)表單元素，結(jié)果輸出至兩個(gè)文本框。
（6）在JavaScript代碼的最后，通過(guò)調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。

您可能感興趣的文章: