javascript深入之window、screen、navigator對象

來源:互聯網
上載者:User
a)首先來看看幾種座標系統:1>螢幕座標描述的是一個案頭上的一個瀏覽器視窗的位置,它們相對於案頭的左上方來度量。2>視窗座標描述的是在web瀏覽器中視口的位置,它們相對於視口的左上方來度量。3>文檔座標描述的是一個HTML文檔中的位置,它們相對於文檔的左上方來度量。文檔座標擷取視窗位置:var getWinPosition = function(){var pos={//window.screenX=>FFleft:(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"){//IEif(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        ;//運行瀏覽器的硬體平台}//FFappName:NetscapeappCodeName:MozillaappVersion:5.0 (Windows)userAgent:Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0platform:Win32var pattern = /(mozilla)(?:.*? rv:([\w.]+)|)/;//IE6.0appName: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.]+)/;//chormeappName: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:Win32var pattern = /(chrome)[ \/]([\w.]+)/;//operaappName: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:Win32var pattern = /(opera)(?:.*version|)[ \/]([\w.]+)/;//safariappName: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:Win32var 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";orwindow.location.replace("#top");

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.