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

最新推荐文章于 2025-03-19 10:26:54 发布

她不美却常驻我心

最新推荐文章于 2025-03-19 10:26:54 发布

阅读量550

点赞数

分类专栏：从零开始学前端 JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39506551/article/details/107846390

版权

本文详细介绍了JavaScript的BOM中的Navigator对象，包括其属性和方法，如navigator.appName、navigator.userAgent等，用于检测浏览器类型和版本。针对360浏览器的特殊性进行了探讨，同时提供了全面的浏览器检测方法。文章强调了在现代前端开发中，虽然浏览器兼容性问题相对减少，但仍需关注老版本浏览器的特性支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者: 她不美却常驻我心
博客地址: 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";
	}
}