原生js对navigator、screen的详细分享(导航、屏幕)

这篇文章是关于navigatorscreen的详细说明,作者不才,如有不足之处还望指正。
我们经常会在js中用到一些方法,比如说获取浏览器版本,系统类型,显示器宽度等操作,我们一个一个的来分析和说明。

注:本文使用chrome 54.0Safari 10.0.2版本说明,其余浏览器以及版本后期再补上,欢迎大家不齐其余浏览器或特殊版本的坑;


navigator

navigator描述了当前正在使用的浏览器的属性,以及当前平台的一些信息,该属性在不同的浏览器下所选参数有所不同,但是常用的参数基本上都有。拿了一堆W3C的说明过来:

  1. appCodeName 返回浏览器的代码名。
  2. appMinorVersion 返回浏览器的次级版本。
  3. appName 返回浏览器的名称。
  4. appVersion 返回浏览器的平台和版本信息。
  5. browserLanguage 返回当前浏览器的语言。
  6. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
  7. cpuClass 返回浏览器系统的 CPU 等级。
  8. onLine 返回指明系统是否处于脱机模式的布尔值。
  9. platform 返回运行浏览器的操作系统平台。
  10. systemLanguage 返回 OS 使用的默认语言。
  11. userAgent 返回由客户机发送服务器的 user-agent 头部的值。
  12. userLanguage 返回 OS 的自然语言设置。

这里以Safari为例列举所返回的值的样式:

  1. appCodeName: "Mozilla"
  2. appName: "Netscape"
  3. appVersion: "5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0.2 Safari/602.3.12"
  4. cookieEnabled: true
  5. doNotTrack: null
  6. geolocation: Geolocation {getCurrentPosition: function, watchPosition: function, clearWatch: function}
  7. language: "zh-cn"
  8. mimeTypes: MimeTypeArray {0: MimeType, 1: MimeType, 2: MimeType, 3: MimeType, 4: MimeType, 5: MimeType, 6: MimeType, 7: MimeType, length: 8, item: function, namedItem: function}
  9. onLine: true
  10. platform: "MacIntel"
  11. plugins: PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5, item: function, namedItem: function, refresh: function}
  12. product: "Gecko"
  13. productSub: "20030107"
  14. userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0.2 Safari/602.3.12"
  15. vendor: "Apple Computer, Inc."
  16. vendorSub: ""
  17. webdriver: undefined
  18. Navigator”原型

可以看出上下两者有很多不一样的参数,上面是我们对一些常用参数的列举:

不一样的参数我们在这里来说一下:geolocation (地理位置),在chrome底下会返回一个叫 hardwareConcurrency的属性值,是返回可用于在用户计算机上运行线程的逻辑处理器数。参考文档

  • geolocation 包含三种方法:clearWatch()getCurrentPosition()watchPosition()如下:

  • getCurrentPosition()获取用户的位置信息,并返回一个位置对象。

  • watchPosition()定期的获取设备信息,和getCurrentPosition()一样返回一个位置对象。

  • clearWatch()用于停止watchPosition()的循环获取。

未完待续… …

评论: