您的位置：首页 > Web前端 > JavaScript

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

2008-01-02 13:52 906 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航