javascript代码实例教程-javascript深入之window、screen、navigator对象

发布时间:2019-04-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript深入之window、screen、navigator对象脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

[htML] 
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"); 

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

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-javascript深入之window、screen、navigator对象全部内容,希望文章能够帮你解决javascript代码实例教程-javascript深入之window、screen、navigator对象所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。