从零开始学前端 - 26. JS BOM之Navigator对象详解及实际应用

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 26. JS BOM之Navigator对象详解及实际应用

  navigator 对象中包含了用户所使用的浏览器以及操作系统等信息，我们可以通过查询相关信息从而让我们的系统能够与浏览器及操作系统兼容。
  尽管我们现在几乎已经不需要在面对 IE6 这种史诗级级别的浏览器，但在IE10以下的浏览器仍存在一些问题，对一些特性并不能起到很好的支持。例如说 IE8/9 并不支持 FormData ，这就在文件上传时给我们造成了一定的麻烦。如果没有兼容低版本浏览器的打算，可以直接通过 navigator 来检测浏览器的版本，来提示用户更换高版本的浏览器以访问系统。

一、Navigator 属性和方法

主要属性：

• appCodeName 返回浏览器的代码名；

  所有以 Netscape 代码为基础和 Microsoft 的浏览器中，返回 Mozilla，有少部分浏览器会返回 Gecko。

• appVersion 返回浏览器版本信息；

  返回的内容包括用户的操作系统及版本、浏览器使用的网页排版引擎、浏览器内核及版本等。且不同浏览器返回的格式是不同的。

• appName 返回浏览器的完整名称；

  在基于 Netscape 的浏览器中，返回 Netscape。在 IE 中，返回 Microsoft Internet Explorer。其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。所以我们并不能通过该属性获得正确的浏览器名称。

• cookieEnabled 表示浏览器 cookie 是否允许使用；

  用户可以手动设置是否允许使用 cookie，该属性值为 true 表示允许使用。

• language 浏览器的主语言；

  中文返回 zh-CN，H5新增了 languages 属性，会返回一个数组来表示网站访客所使用的语言，比如 Chrome 会返回 ["zh-CN", "zh", "en"]。

• onLine 表示浏览器是否连接到了因特网；

  返回一个布尔值来表明浏览器是否联网。

• platform 返回浏览器所在的系统平台；

   windows 会返回 win32等。

• plugins 浏览器中安装的插件信息的数组；

• userAgent 返回浏览器的用户代理字符串；

其他属性和方法

• appMinorVersion 返回浏览器次版本信息；

  只有IE浏览器支持该属性，FireFox、Chrome、Edge均返回 undefined。

• buildID 返回浏览器编译版本；
• cpuClass 返回客户端CPU 类型；
• mimeTypes 在浏览器中注册的 MIME 类型数组；
• oscpu 客户端计算机的操作系统或使用的CPU；
• product 产品名称（如 Gecko）；
• productSub 关于产品的次要信息（如 Gecko 的版本）；
• systemLanguage 操作系统的语言；
• userLanguage 操作系统的默认语言；
• userProfile 借以访问用户个人信息的对象；
• vendor 浏览器的品牌；
• vendorSub 有关供应商的次要信息；

  貌似只有 Firefox支持该属性，格式为 20181001000000。

• javaEnabled() 表示当前浏览器中是否启用了 Java 4；
• preference() 设置用户的首选项；
• register-ContentHandler() 针对特定的MIME类型将一个站点注册为处理程序；
• register-ProtocolHandler() 针对特定的协议将一个站点注册为处理程序；

二、实际应用

检测浏览器类型

  浏览器在发送 HTTP 请求时，会在请求头附带一个具有 user-agent（用户代理）的字符串，其中包含了浏览器的名称和版本等信息，可以通过用户代理字符串检测浏览器类型。
  另外 IE11 中 userAgent 已经不包含 msie 所以需要根据 Trident 来进行相关判断：

/**
* 获取浏览器类型
* @description 不能用于判断 360 等套壳浏览器
* @returns {String} 浏览器名称
*/
function getBrowser() {
   
	var ua = navigator.userAgent.toLowerCase();
	if (/msie/.test(ua) && !/opera/.test(ua) || /(trident)/.test(ua)) {
   
		return "IE";
	} else if (/opera/.test(ua)) {
   
		return "Opera";
	} else if (/edge/.test(ua)) {
   
		return "Edge";
	} else if (/version.*safari/.test(ua)) {
   
		return "Safari";
	} else if (/chrome/.test(ua)) {
   
		return "Chrome";
	} else if (/gecko/.test(ua) && !/webkit/.test(ua)) {
   
		return "Firefox";
	}else{
   
		return "Other Browser";
	}
}

检测浏览器版本

  一般我们只需要来检测 IE 的浏览器版本，因为其它的浏览器都能提供很好的兼容性，并不需要刻意的去处理，而IE 浏览器会在 MSIE 字符串后面带一个空格，然后跟随版本号及分号，根据这一点我们可以直接截取出浏览器的版本

<