1. 程式人生 > >js 計算瀏覽器寬度和高度

js 計算瀏覽器寬度和高度

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>請調整瀏覽器視窗</title> 

</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>