a)首先来看看几种坐标系统:
1>屏幕坐标描述的是一个桌面上的一个浏览器窗口的位置,它们相对于桌面的左上角来度量。
2>窗口坐标描述的是在web浏览器中视口的位置,它们相对于视口的左上角来度量。
3>文档坐标描述的是一个HTML文档中的位置,它们相对于文档的左上角来度量。文档坐标
获取窗口位置:
var getWinPosition = function(){
var pos={
//window.screenX=>FF
left:(typeof window.screenLeft === 'number')? window.screenLeft: window.screenX;
top :(typeof window.screenTop === "number")? window.screenTop : window.screenY;
};
return pos;
}
获取页面视口大小:
var getViewPortSize = function(){
var w = window.innerWidth,
h = widnow.innerHeight;
if(typeof w !== "number"){//IE
if(document.compatMode == "CSS1Compat"){//标准模式
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}else{//混杂模式 IE6中无<!doctype >声明
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
return {
width :w,
height:h
}
}
b)screen对象提供显示器的大小和颜色数量的信息
属性 说明
availHeight 屏幕高度(不包含任务栏)
availWidth 屏幕宽度(不包含任务栏)
bufferDepth 设置或获取位图缓冲颜色的像素位数
colorDepth 获取用于目标设置或缓冲区的颜色的像素位数
deviceXDPI 设置或获取系统屏幕水平方向每英寸的实际点数值
deviceYDPI 设置或获取系统屏幕垂直方向每英寸的实际点数值
fontSmoothingEnabled 获取用户是否在显示设置中启用了圆整屏幕字体边角的选项
height 获取屏幕的垂直分辨率
logicalXDPI 获取系统屏幕水平每英寸的常规点数值
logicalYDPI 获取系统屏幕垂直每英寸的常规点数值
updateInterval 设置或获取屏幕的更新间隔
width 获取屏幕的垂直分辨率
获取屏幕(除去任务栏)大小:
var getScreenSize = function (){
var w = screen.availWidth,
h = screen.availHeight;
return {
width :w,
height:h
}
}
c)Navigator对象包含浏览器的所有信息
var getBrowserMessage = function (){
var nav = navigator;
return "appName:" +nav.appName +"\n"+//浏览器的简单名称
"appCodeName:"+nav.appCodeName+"\n"+//浏览器的代码名
"appVersion:" +nav.appVersion +"\n"+//浏览器的版本号
"userAgent:" +nav.userAgent +"\n"+//浏览器在user-agent HTTP头部中发送的字符串
"platform:" +nav.platform ;//运行浏览器的硬件平台
}
//FF
appName:Netscape
appCodeName:Mozilla
appVersion:5.0 (Windows)
userAgent:Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0
platform:Win32
var pattern = /(mozilla)(?:.*? rv:([\w.]+)|)/;
//IE6.0
appName:Microsoft Internet Explorer
appCodeName:Mozilla
appVersion:4.0 (compatible; MSIE 6.0; Windows NT 5.1; InfoPath.2; .NET4.0C)
userAgent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; InfoPath.2; .NET4.0C)
platform:Win32
var pattern = /(msie) ([\w.]+)/;
//chorme
appName:Netscape
appCodeName:Mozilla
appVersion:5.0 (Windows NT 5.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
userAgent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
platform:Win32
var pattern = /(chrome)[ \/]([\w.]+)/;
//opera
appName:Opera
appCodeName:Mozilla
appVersion:9.80 (Windows NT 5.1; U; zh-cn)
userAgent:Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.10.289 Version/12.02
platform:Win32
var pattern = /(opera)(?:.*version|)[ \/]([\w.]+)/;
//safari
appName:Netscape
appCodeName:Mozilla
appVersion:5.0 (Windows NT 5.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16
userAgent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16
platform:Win32
var pattern = /(webkit)[ \/]([\w.]+)/;
获取浏览器的版本号:
var getBrowser = function( ua ) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
var nav=getBrowser(navigator.userAgent);
alert(nav.browser+"----"+nav.version);
d)返回到顶部
window.location.hash="#top";
or
window.location.replace("#top");
javascript深入之window、screen、navigator对象
最新推荐文章于 2023-08-03 21:06:02 发布