javascript深入之window、screen、navigator对象

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");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值