javascript深入之window、screen、navigator对象

  1. a)首先来看看几种坐标系统:
  2. 1>屏幕坐标描述的是一个桌面上的一个浏览器窗口的位置,它们相对于桌面的左上角来度量。
  3. 2>窗口坐标描述的是在web浏览器中视口的位置,它们相对于视口的左上角来度量。
  4. 3>文档坐标描述的是一个HTML文档中的位置,它们相对于文档的左上角来度量。文档坐标
  5. 获取窗口位置:
  6. var getWinPosition = function(){
  7.     var pos={
  8.         //window.screenX=>FF
  9.         left:(typeof window.screenLeft === ‘number’)? window.screenLeft: window.screenX;
  10.         top :(typeof window.screenTop  === “number”)? window.screenTop : window.screenY;
  11.     };
  12.     return pos;
  13. }
  14. 获取页面视口大小:
  15. var getViewPortSize = function(){
  16.     var w = window.innerWidth,
  17.         h = widnow.innerHeight;
  18.     if(typeof w !== “number”){//IE
  19.         if(document.compatMode == “CSS1Compat”){//标准模式
  20.             w = document.documentElement.clientWidth;
  21.             h = document.documentElement.clientHeight;
  22.         }else{//混杂模式 IE6中无<!doctype >声明
  23.             w = document.body.clientWidth;
  24.             h = document.body.clientHeight;
  25.         }
  26.     }
  27.     return {
  28.         width :w,
  29.         height:h
  30.     }
  31. }
  32. b)screen对象提供显示器的大小和颜色数量的信息
  33. 属性                          说明
  34. availHeight          屏幕高度(不包含任务栏)
  35. availWidth           屏幕宽度(不包含任务栏)
  36. bufferDepth          设置或获取位图缓冲颜色的像素位数
  37. colorDepth           获取用于目标设置或缓冲区的颜色的像素位数
  38. deviceXDPI           设置或获取系统屏幕水平方向每英寸的实际点数值
  39. deviceYDPI           设置或获取系统屏幕垂直方向每英寸的实际点数值
  40. fontSmoothingEnabled 获取用户是否在显示设置中启用了圆整屏幕字体边角的选项
  41. height               获取屏幕的垂直分辨率
  42. logicalXDPI          获取系统屏幕水平每英寸的常规点数值
  43. logicalYDPI          获取系统屏幕垂直每英寸的常规点数值
  44. updateInterval       设置或获取屏幕的更新间隔
  45. width                获取屏幕的垂直分辨率
  46. 获取屏幕(除去任务栏)大小:
  47. var getScreenSize = function (){
  48.     var w = screen.availWidth,
  49.         h = screen.availHeight;
  50.     return {
  51.         width :w,
  52.         height:h
  53.     }
  54. }
  55. c)Navigator对象包含浏览器的所有信息
  56. var getBrowserMessage = function (){
  57.     var nav = navigator;
  58.     return  “appName:”    +nav.appName    +”\n”+//浏览器的简单名称
  59.             “appCodeName:”+nav.appCodeName+”\n”+//浏览器的代码名
  60.             “appVersion:” +nav.appVersion +”\n”+//浏览器的版本号
  61.             “userAgent:”  +nav.userAgent  +”\n”+//浏览器在user-agent HTTP头部中发送的字符串
  62.             “platform:”   +nav.platform        ;//运行浏览器的硬件平台
  63. }
  64. //FF
  65. appName:Netscape
  66. appCodeName:Mozilla
  67. appVersion:5.0 (Windows)
  68. userAgent:Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0
  69. platform:Win32
  70. var pattern = /(mozilla)(?:.*? rv:([\w.]+)|)/;
  71. //IE6.0
  72. appName:Microsoft Internet Explorer
  73. appCodeName:Mozilla
  74. appVersion:4.0 (compatible; MSIE 6.0; Windows NT 5.1; InfoPath.2; .NET4.0C)
  75. userAgent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; InfoPath.2; .NET4.0C)
  76. platform:Win32
  77. var pattern = /(msie) ([\w.]+)/;
  78. //chorme
  79. appName:Netscape
  80. appCodeName:Mozilla
  81. appVersion:5.0 (Windows NT 5.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
  82. userAgent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
  83. platform:Win32
  84. var pattern = /(chrome)[ \/]([\w.]+)/;
  85. //opera
  86. appName:Opera
  87. appCodeName:Mozilla
  88. appVersion:9.80 (Windows NT 5.1; U; zh-cn)
  89. userAgent:Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.10.289 Version/12.02
  90. platform:Win32
  91. var pattern = /(opera)(?:.*version|)[ \/]([\w.]+)/;
  92. //safari
  93. appName:Netscape
  94. appCodeName:Mozilla
  95. appVersion:5.0 (Windows NT 5.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16
  96. userAgent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16
  97. platform:Win32
  98. var pattern = /(webkit)[ \/]([\w.]+)/;
  99. 获取浏览器的版本号:
  100. var getBrowser = function( ua ) {
  101.     ua = ua.toLowerCase();
  102.     var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
  103.         /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
  104.         /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
  105.         /(msie) ([\w.]+)/.exec( ua ) ||
  106.         ua.indexOf(“compatible”) < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
  107.         [];
  108.     return {
  109.         browser: match[ 1 ] || “”,
  110.         version: match[ 2 ] || “0”
  111.     };
  112. };
  113. var nav=getBrowser(navigator.userAgent);
  114. alert(nav.browser+”—-“+nav.version);
  115. d)返回到顶部
  116. window.location.hash=”#top”;
  117. or
  118. window.location.replace(“#top”);

标签