JS擷取頁面視窗大小的代碼解讀

來源:互聯網
上載者:User

本節代碼主要使用了Document對象關於視窗的一些屬性,這些屬性的主要功能和用法如下。
要得到視窗的尺寸,對於不同的瀏覽器,需要使用不同的屬性和方法:若要檢測視窗的真實尺寸,在Netscape下需要使用Window的屬性;在IE下需要深入Document內部對body進行檢測;在DOM環境下,若要得到視窗的尺寸,需要注意根項目<html>的尺寸,而不是<body>元素。
Window對象的innerWidth屬性包含當前視窗的內部寬度。Window對象的innerHeight屬性包含當前視窗的內部高度。
Document對象的body屬性對應HTML文檔的<body>標籤。Document對象的documentElement屬性則表示 HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在視窗的當前高度。document.body. clientWidth表示HTML文檔所在視窗的當前寬度。 複製代碼 代碼如下:<!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>請調整瀏覽器視窗</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</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>
<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.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions(); //調用函數,擷取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

運行該程式後,頁面出現兩個文字框,分別顯示視窗當前的寬度和高度,。當調整瀏覽器視窗大小時,文字框中的數值會隨之改變,分別是不同時刻視窗的大小。
來源程式解讀
(1)程式首先建立一個表單,包含兩個文字框,用於顯示視窗當前的寬度和高度,並且,其數值會隨視窗大小的改變而變化。
(2)在隨後的JavaScript代碼中,首先定義了兩個變數winWidth和winHeight,用於儲存視窗的高度值和寬度值。
(3)然後,在函數findDimensions ( )中,使用window.innerHeight和window.innerWidth得到視窗的高度和寬度,並將二者儲存在前述兩個變數中。
(4)再通過深入Document內部對body進行檢測,擷取視窗大小,並儲存在前述兩個變數中。
(5)在函數的最後,通過按名稱訪問表單元素,結果輸出至兩個文字框。
(6)在JavaScript代碼的最後,通過調用findDimensions ( )函數,完成整個操作。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.