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