window.navigator详解和使用场景

头像
caoweiju
    阅读 6 分钟
    3

    navigator简述

    window.navigator返回一个navigator对象的引用,可以用它来查询一些关于运行当前脚本的应用程序的相关信息.
    navigator的属性和方法包括实现了NavigatorID接口的方法和属性，NavigatorID接口包含浏览器识别相关的方法和属性，但是不直接给开发者使用，navigator通过实现NavigatorID接口并添加了一些自有方法、属性，可能根据各个浏览器表现不一，下面给出了chrome的navigator的包含的属性和方法：

    appCodeName : "Mozilla"
appName : "Netscape"
appVersion : "5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36"
bluetooth : Bluetooth {}
budget : BudgetService {}
connection : NetworkInformation {downlink : 0, effectiveType : "4g", onchange : null, rtt : 75}
cookieEnabled : true
doNotTrack : null
geolocation : Geolocation {}
getBattery : ƒ getBattery()
getGamepads : ƒ getGamepads()
getUserMedia : ƒ getUserMedia()
hardwareConcurrency : 8
javaEnabled : ƒ javaEnabled()
language : "zh-CN"
languages : (2) ["zh-CN", "zh"]
maxTouchPoints : 0
mediaDevices : MediaDevices {ondevicechange : null}
mimeTypes : MimeTypeArray {0 : MimeType, 1 : MimeType, 2 : MimeType, 3 : MimeType, 4 : MimeType, length : 5}
onLine : true
permissions : Permissions {}
platform : "MacIntel"
plugins : PluginArray {0 : Plugin, 1 : Plugin, 2 : Plugin, 3 : Plugin, length : 4}
presentation : Presentation {defaultRequest : null, receiver : null}
product : "Gecko"
productSub : "20030107"
registerProtocolHandler  : ƒ registerProtocolHandler()
requestMIDIAccess : ƒ requestMIDIAccess()
sendBeacon : ƒ sendBeacon()
serviceWorker : ServiceWorkerContainer {controller : null, ready : Promise, oncontrollerchange : null, onmessage : null}
unregisterProtocolHandler : ƒ unregisterProtocolHandler()
userAgent : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36"
vendor : "Google Inc."
vendorSub : ""
vibrate : ƒ vibrate()
webkitGetUserMedia : ƒ webkitGetUserMedia()
webkitPersistentStorage : DeprecatedStorageQuota {}
webkitTemporaryStorage : DeprecatedStorageQuota {}

    上面有很多属性和方法不是标准，所以并不适合开发人员使用，所以把navigator实现的NavigatorID接口的属性和方法来解析下即可；其中包括如下：

    1. NavigatorID.appCodeName 只读
      任何浏览器中，总是返回 'Gecko'。该属性仅仅是为了保持兼容性。
    2. NavigatorID.appName 只读
      返回浏览器的官方名称。不要指望该属性返回正确的值。
    3. NavigatorID.appVersion 只读
      返回一个字符串，表示浏览器的版本。不要指望该属性返回正确的值。
    4. NavigatorID.platform 只读
      返回一个字符串，表示浏览器的所在系统平台。
    5. NavigatorID.product 只读
      返回当前浏览器的产品名称（如，"Gecko"）。
    6. NavigatorID.userAgent 只读
      返回当前浏览器的用户代理字符串（user agent string）

    还有部分其实大部分浏览器尝试也都比较支持的像：browserLanguage、cookieEnabled、systemLanguage、userLanguage等，但是都应该尽量不使用。

    appCodeName属性

    功能：返回浏览器的代码名。该属性是一个只读的字符串。
    语法：navigator.appCodeName
    在所有以Netscape代码为基础的浏览器中，它的值是"Mozilla"。为了兼容起见，在Microsoft的浏览器中，它的值也是"Mozilla"，同时在safari在浏览器的console里运行navigator.appCodeName得出的结果还是"Mozilla"。
    所以这个看起来并不实用，因为IE、chrome、safari返回的都是“Mozilla”；

    NavigatorID.appName属性

    返回所使用浏览器的名称。由于兼容性问题，HTML5 规范允许该属性返回 "Netscape" 。
    在chrome、safari的里面都是返回"Netscape"
    该属性并不一定能返回正确的浏览器名称。在基于 Gecko 的浏览器 （例如 Firefox）和基于 WebKit 的浏览器（例如 Chrome 和 Safari）中，返回的浏览器名称都是 "Netscape".

    appVersion属性 【已废弃】

    返回一个字符串，表示所使用浏览器的版本号。它可能只包含一个版本数字，如 "5.0"，还可能包含一些其他的相关信息。由于兼容性问题，HTML5规范允许该属性返回 "4.0"。
    该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

    platform属性

    返回一个字符串,表示浏览器所在的系统平台类型.
    platform 可能是: "Win32", "Linux i686", "MacPPC", "MacIntel", 等，
    在一定程度上可以用来区分移动端和pc端，但不是很好的方案。

    product属性

    该属性返回当前浏览器的产品名称，说起来其实也不靠谱，毕竟也就那么几种，还可以伪装。
    注意：该属性不一定返回一个真实的产品名称。Gecko 和 WebKit 浏览器返回 "Gecko" 作为该属性的值。

    userAgent属性 【重点】

    返回当前浏览器的用户代理（user agent）字符串；先看看chrome、safari、ios、android的返回值：

    chrome:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Safari/537.36
safari:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 
    Safari/604.1.38
ios11刘海X:
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Version/11.0 Mobile/15A372 Safari/604.1
ipad：
    Mozilla/5.0 
    (iPad; CPU OS 9_1 like Mac OS X) 
    AppleWebKit/601.1.46 (KHTML, like Gecko)
    Version/9.0 Mobile/13B143 Safari/601.1
galxy sansum:
    Mozilla/5.0 
    (Linux; Android 5.0; SM-G900P Build/LRX21T) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
安装uc浏览器：
    Mozilla/5.0 
    (Linux; U; Android 6.0.1; zh-CN; Mi Note 2 Build/MXB48T)
    AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
    Chrome/40.0.2214.89 UCBrowser/11.4.9.941 Mobile Safari/537.36
winphone:
    Mozilla/5.0 
    (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
hybrid方法的可能：
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Mobile/15A372 weibo/80011134

    以上数据大部分是在chrome开发者工具模拟的或者ios模拟器模拟的结果，希望更多的话可以参考：
    http://www.cnblogs.com/yannis... 或者 http://blog.csdn.net/rj042/ar... 这个链接中给的列表，
    至于格式的话由于历史原因，也是千奇百怪，主要是各家浏览器厂商都想要自己的浏览器被其他的兼容，所以都会或多或少的加上一些其他的信息在里面；
    主要的格式列举如下：

    1. Gecko Gecko 是 Firefox 的呈现引擎

      Mozilla/MozillaVersion 
(Platform; Encryption; OS-or-CPU;Language;PrereleaseVersion)
Gecko/GeckoVersion 
ApplicationProduct/ApplicationProductVersion
--- win下的展示---
Mozilla/5.0 
(Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) 
Gecko/20071127 
Firefox/2.0.0.11

    2. WebKit web 浏览器：Safari。它的呈现引擎叫 WebKit

      Mozilla/5.0 
(Platform; Encryption; OS-or-CPU; Language)             
AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) 
Safari/SafariVersion
---mac的展示---
Mozilla/5.0 
(Macintosh; Intel Mac OS X 10_12_6) 
AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 
Safari/604.1.38

    3. Chrome Google Chrome 浏览器以 WebKit 作为呈现引擎；字串格式是在 webKit 信息的基础上又增加了如下

      Mozilla/5.0 
(Platform; Encryption; OS-or-CPU; Language)
AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) 
Chrome/ChromeVersion Safari/SafariVersionChrome
---mac下展示---
Mozilla/5.0 
(Macintosh; Intel Mac OS X 10_12_6) 
AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/61.0.3163.91 Safari/537.36

    还有很多比较不一样的格式：Opera、Konqueror等，而user-agent的作用有以下两点比较重要：

    1、统计用户浏览器使用情况。有些浏览器说被多少人使用了，实际上就可以通过判断每个IP的UA来确定这个IP是用什么浏览器访问的，以得到使用量的数据。

    2、根据用户使用浏览器的不同，显示不同的排版从而为用户提供更好的体验。有些网站会根据这个来调整打开网站的类型,如是手机的就打开wap，显示非手机的就打开pc常规页面。用手机访问谷歌和电脑访问是不一样的，这些是谷歌根据访问者的UA来判断的。

    浏览器统计

    这需要提取每个浏览器的userAgent的特征字符串，继而使用相应的匹配来确定具体的浏览器类别；主要是类似百度统计和站在统计之类的第三方以及大公司会关注这个指标，来确定适配的针对性，甚至可能ie没有访问量就不需要支持了。

    自适应方案

    首先可以考虑区别pc还是移动端：

    isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

    以上基本可以考虑到大部分移动端，但是现在hybrid如此盛行，所以很多时候还需要区分Android、iPhone、ipad之类的，因为在app里面，ios的表现和移动端浏览器编写会不一样，特别是头部的置顶；区分方式以上其实就够实用的了。

    移动端适配响应式useragentuser-agentnavigator
    caoweiju
    1.5k 声望53 粉丝

    class Myself {

    « 上一篇
    git commit的一些推荐规范[AngularJS推荐]
    下一篇 »
    细说event.currentTarget & event.target的不同使用

    引用和评论

    推荐阅读
    头像
    HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    caoweiju赞 2阅读 7.4k

    头像
    响应式rem适配方案

    mosquito阅读 1.2k评论 2

    头像
    现代 JavaScript 框架工作原理你了解多少？

    破晓L阅读 1k

    头像
    flutter系列之:Navigator的高级用法

    flydean阅读 1.2k

    头像
    移动端从入门到调试

    qinyuanqiblog阅读 299

    头像
    tio-boot 动态 返回 CSS 实现

    李通阅读 180

    头像
    vue3知识点：响应式数据的判断

    刘大猫阅读 143

    0 条评论
    得票最新