window对象详解,JavaScript 获取浏览器的显示区域大小信息

来源：互联网发布：js数组增加元素属性编辑：程序博客网时间：2024/05/20 12:20

window 窗口对象 - Javascript语言描述
---------------------------------------------------------------------
注:页面上元素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 onresize="javascript:displayScreenSize();" onload="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>