---------------------------------------------------------------------
注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫
否則會提示你一個錯誤信息 "引用的元素爲空或者不是對象"
---------------------------------------------------------------------
對象屬性
window //窗口自身
window.self //引用本窗口window=window.self
window.closed //表示窗口是否已經關閉
window.name //爲窗口命名
window.defaultStatus //設定窗口狀態欄信息
window.location //URL地址，設置這個屬性可以打開新的頁面
---------------------------------------------------------------------
對象方法
window.alert("text") //提示信息對話框
window.confirm("text") //確認對話框
window.prompt("text") //要求鍵盤輸入對話框
window.setIntervel("action",time) //每隔指定的時間(毫秒)就執行一次操作
window.clearInterval() //清除時間設置作用就是終止循環
window.setTimeout(action,time) //隔了指定的時間(毫秒)執行一次操作
window.open() //打開新的窗口
window.close() //關閉腳本所在窗口
---------------------------------------------------------------------
成員對象
window.event
window.document //見document對象詳解
window.history
window.screen
window.navigator
window.external
---------------------------------------------------------------------
window.history對象
window.history.length //瀏覽過的頁面數
history.back() //後退
history.forward() //前進
history.go(i) //到歷史清單的第i位
//i>0前進,i<0後退
---------------------------------------------------------------------
window.screen對象
window.screen.width //屏幕寬度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕色深
window.screen.availWidth //可用寬度
window.screen.availHeight //可用高度(除去任務欄的高度)
---------------------------------------------------------------------
window.external對象
window.external.AddFavorite("地址","標題" ) //把網站添加到收藏夾
---------------------------------------------------------------------
window.navigator對象
window.navigator.appCodeName //瀏覽器代碼名
window.navigator.appName //瀏覽器程序名
window.navigator.appMinorVersion //瀏覽器補丁版本
window.navigator.cpuClass //cpu類型 x86
window.navigator.platform //操作系統類型 win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客戶系統語言 zh-cn簡體中文
window.navigator.userLanguage //用戶語言,同上
window.navigator.appVersion //瀏覽器版本(包括系統版本)
window.navigator.userAgent
window.navigator.onLine //用戶否在線
window.navigator.cookieEnabled //瀏覽器是否支持cookie
window.navigator.mimeTypes
---------------------------------------------------------------------
JavaScript 獲取瀏覽器的顯示區域大小信息:
| 區域說明 | JavaScript Code |
| 網頁可見區域寬 | document.body.clientWidth |
| 網頁可見區域高 | document.body.clientHeight |
| 網頁可見區域寬(包括邊線的寬) | document.body.offsetWidth |
| 網頁可見區域高(包括邊線的寬) | document.body.offsetHeight |
| 網頁正文全文寬 | document.body.scrollWidth |
| 網頁正文全文高 | document.body.scrollHeight |
| 網頁被捲去的高 | document.body.scrollTop |
| 網頁被捲去的左 | document.body.scrollLeft |
| 網頁正文部分上 | window.screenTop |
| 網頁正文部分左 | window.screenLeft |
| 屏幕分辨率的高 | window.screen.height |
| 屏幕分辨率的寬 | window.screen.width |
| 屏幕可用工作區高度 | window.screen.availHeight |
| 屏幕可用工作區寬度 | window.screen.availWidth |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Screen Size Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function displayScreenSize()
{
var bodyWidth =document.body.clientWidth; //網頁可見區域寬
var bodyHeight =document.body.clientHeight; //網頁可見區域高
var bodyWidthWithBorder =document.body.offsetWidth; //網頁可見區域寬(包括邊線的寬)
var bodyHeightWithBorder=document.body.offsetHeight; //網頁可見區域高(包括邊線的寬)
var bodyWidthWithScroll =document.body.scrollWidth; //網頁正文全文寬
var bodyHeightWithScroll=document.body.scrollHeight; //網頁正文全文高
var bodyTopHeight =document.body.scrollTop; //網頁被捲去的上邊距
var bodyLeftWidth =document.body.scrollLeft; //網頁被捲去的左邊距
var windowTopHeight =window.screenTop; //網頁正文部分上邊距
var windowLeftWidth =window.screenLeft; //網頁正文部分左邊距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的寬
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作區高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作區寬度
var Str="<p>";
Str+="網頁可見區域寬:<span class='data'>"+bodyWidth+"px</span><br>";
Str+="網頁可見區域高:<span class='data'>"+bodyHeight+"px</span><br>";
Str+="網頁可見區域寬(包括邊線的寬):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
Str+="網頁可見區域高(包括邊線的寬):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
Str+="網頁正文全文寬:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
Str+="網頁正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
Str+="網頁被捲去的上邊距:<span class='data'>"+bodyTopHeight+"px</span><br>";
Str+="網頁被捲去的左邊距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
Str+="網頁正文部分上邊距:<span class='data'>"+windowTopHeight+"px</span><br>";
Str+="網頁正文部分左邊距:<span class='data'>"+windowLeftWidth+"px</span><br>";
Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
Str+="屏幕分辨率的寬:<span class='data'>"+screenWidth+"px</span><br>";
Str+="屏幕可用工作區高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
Str+="屏幕可用工作區寬度:<span class='data'>"+screenAvailWidth+"px</span><br>";
Str+="</p>"
document.getElementById('dispaly').innerHTML=Str;
}
// -->
</script>
<style type="text/css">
<!--
A:link {
text-decoration: none;
color: #ff0000;
font-weight: normal;
}
A:visited {
text-decoration: none;
color: #ff6666;
font-weight: normal;
}
A:active {
text-decoration: none;
color: #ff0000;
font-weight: normal;
}
A:hover {
text-decoration: underline;
color: #ff0000;
font-weight: normal;
}
.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
}
.display {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.data {
color: #FF0000;
font-weight: bold;
}
.foot {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5e5e5e;
}
-->
</style>
</head><body οnresize="javascript:displayScreenSize();" οnlοad="javascript:displayScreenSize();">
<span class="title">Screen Size Test</span>
<hr align="left" size="1" noshade>
<span class="display">Now we get the screen size about this browser </span><br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right"><span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">
apolloge</a> </span></p>
</body></html>