前面的话

  navigator对象现在已经成为识别客户端浏览器的事实标准,navigator对象是所有支持javascript的浏览器所共有的。本文将详细介绍navigator对象和用户代理检测

属性

  与其他BOM对象的情况一样,每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法,以及支持它们的浏览器版本

属性                    说明

appCodeName             浏览器名称[所有浏览器都返回Mozilla]
userAgent 浏览器的用户代理字符串
appVersion 浏览器版本
appMinorVersion 次版本信息[IE返回0,chrome和firefox不支持]
platform 浏览器所在的系统平台[所有浏览器都返回Win32]
plugins 浏览器中安装的插件信息的数组
mimeTypes 在浏览器中注册的MIME类型数组 language 浏览器主语言[IE10-不支持,其他浏览器返回zh-CN]
systemLanguage 操作系统语言[IE返回zh-CN,chrome和firefox不支持]
userLanguage 操作系统默认语言[IE返回zh-CN,chrome和firefox不支持]
product 产品名称[IE10-不支持,其他浏览器返回Gecko]
productSub 产品次要信息[IE不支持,chrome返回20030107,firefox返回20100101]
vendor 浏览器品牌[chrome返回Google Inc.,IE和firefox不支持]
onLine 是否连接因特网[IE根据实际情况返回true或false,chrome和firefox始终返回true] cookieEnabled 表示cookie是否启用[所有浏览器都返回true]
javaEnabled 是否启用java[IE8-浏览器返回{},其他浏览器返回function javaEnabled()]
buildID 浏览器编译版本[firefox返回20170125094131,chrome和IE不支持]
cpuClass 计算机使用的CPU类型[IE返回x86,chrome和firefox不支持]
oscpu 操作系统或使用的CPU[firefox返回Windows NT 10.0; WOW64,chrome和IE不支持]

检测插件

  检测浏览器插件是一种最常见的检测例程

  对于非IE浏览器,可以使用plugins数组来达到这个目的该数组中的每一项都包含下列属性

name:插件的名字 
description:插件的描述
filename:插件的文件名
length:插件所处理的MIME类型数量

  通过循环迭代每个插件并将插件的name与给定的名字进行比较

function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0; i < navigator.plugins.length; i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
}
//检测flash
console.log(hasPlugin("Flash"));//true

  对于IE浏览器,检测插件的办法是使用专有的ActiveXObject类型,并尝试创建一个特定插件的实例。IE是使用COM对象来实现插件的,而COM对象使用唯一标识符来标识。因此,想检查特定的插件就必须知道其COM标识符。例如,Flash的标识符是ShockwaveFlash.ShockwaveFlash

function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
//检测Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true

【兼容写法】

//检测非IE中的插件
function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0; i < navigator.plugins.length; i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
}
//检测IE中的插件
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
function hasFlash(){
var result = hasPlugin("Flash");
if(!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
console.log(hasFlash());//true

用户代理检测

  navigator对象中最重要的作用就是使用useragent实现用户代理检测。用户代理检测是一种万不得已的做法,优先级排在前面介绍过的能力检测之后

发展历史

  1、1993年美国NCSA国家超级计算机中心发布了世界上第一款web浏览器Mosaic,该浏览器的用户代理字符串为Mosaic/0.9

  2、Netscape公司进入浏览器开发领域,将自己产品的代号定名了Mozilla(Mosaic Killer)的简写,用户代理字符串格式为Mozilla/版本号 [语言] (平台;加密类型)

  3、IE赢得用户广泛认可的web浏览器IE3发布时,Netscape已经占据了绝对市场份额,为了让服务器能够检测到IE,IE将用户代理字符串修改成兼容Netscape的形式:Mozilla/2.0(compatible;MSIE版本号;操作系统)

  4、各浏览器陆续出现,用户代理字符串的显示格式也越来越类似……

  HTTP规范明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号。但现实中却没有这么简单,各浏览器的检测结果如下所示

检测结果

【IE3】

   Mozilla/2.0 (compatible; MSIE3.02; windows 95)

【IE6】

   Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

【IE7】

   Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

【IE8】

   Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

【IE9】

   Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

【IE10】

   Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

【IE11】

   Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko

【chrome】

  Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

【safari】

  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

【firefox】

  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

【opera】

  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25

【ipad】

  Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

【iphone】

  Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

【android】

  Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

识别内核

  常见的内核有Trident、Gecko和Webkit

  [注意]因为Trident和Webkit的用户代理字符串中可能会出现like Gecko的字眼,所以最后再测Gecko

function whichEngine(){
var ua = navigator.userAgent;
//Trident内核
if(/Trident/.test(ua)){
return "Trident";
}
//Webkit内核
if(/WebKit/.test(ua)){
return "WebKit";
}
//Gecko内核
if(/Gecko/.test(ua)){
return "Gecko";
}
}
console.log(whichEngine());//IE11下显示"Trident"

识别浏览器

【1】IE

  IE3-IE10都可以通过MSIE的版本号来判断,因为有的IE11并不出现MSIE字符,且safari中也有rv字段,所以IE11需要通过rv后的版本号和Trident来配合判断

function isIE(){
var ua = navigator.userAgent;
//检测Trident引擎,IE8+
if(/Trident/.test(ua)){
//IE11+
if(/rv:(\d+)/.test(ua)){
return RegExp["$1"];
}
//IE8-IE10
if(/MSIE (\d+)/.test(ua)){
return RegExp["$1"];
}
}
//检测IE标识,IE7-
if(/MSIE (\d+)/.test(ua)){
return RegExp["$1"];
}
}
console.log(isIE());//只有IE会返回版本号,其他浏览器都返回undefined

【2】chrome

function isChrome(){
var ua = navigator.userAgent;
//先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
if(!/OPR/.test(ua)){
if(/Chrome\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
console.log(isChrome());//只有Chrome会返回版本号45.0.2454.93,其他浏览器都返回undefined

【3】safari

function isSafari(){
var ua = navigator.userAgent;
//先排除opera
if(!/OPR/.test(ua)){
//检测出chrome和safari浏览器
if(/Safari/.test(ua)){
//检测出safari
if(/Version\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
}
console.log(isSafari());//只有safari会返回版本号5.1.7,其他浏览器都返回undefined

【4】firefox

function isFireFox(){
if(/Firefox\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isFireFox());//只有firefox会返回版本号40.0,其他浏览器都返回undefined

【5】opera

function isOpera(){
if(/OPR\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isOpera());//只有opera会返回版本号32.0.1948.25,其他浏览器都返回undefined

识别操作系统

  使用navigator.platform检测操作系统更加简单,因为其可能包括的值为“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等,且在不同浏览器中是一致的

  而通过navigator.userAgent可以来得到window系统的详细信息

windows版本                        ->             内核版本
Windows XP -> 5.1
Windows Vista -> 6.0
Windows 7 -> 6.1
Windows 8 -> 6.2
Windows 8.1 -> 6.3
Windows 10技术预览版   -> 6.4
Windows 10.0       -> 10.0
function whichSyStem(){
var ua = navigator.userAgent;
var pf = navigator.platform;
if(/Mac/.test(pf)){
return "Mac";
}
if(/X11/.test(pf) || /Linux/.test(pf)){
return "Linux";
}
if(/Win/.test(pf)){
if(/Windows NT (\d+\.\d+)/.test(ua)){
switch(RegExp["$1"]){
case "5.0":
return "Windows 2000";
case "5.1":
return "Windows XP";
case "6.0":
return "Windows Vista";
case "6.1":
return "Windows 7";
case "6.2":
return "Windows 8";
case "6.3":
return "Windows 8.1";
case "6.4":
case "10.0":
return "Windows 10";
}
}
}
}
console.log(whichSyStem())//Windows 10

识别移动端

function whichMobile(){
var ua = navigator.userAgent;
if(/iPhone OS (\d+_\d+)/.test(ua)){
return 'iPhone' + RegExp.$1.replace("_",".");
}
if(/iPad.+OS (\d+_\d+)/.test(ua)){
return 'iPad' + RegExp.$1.replace("_",".")
}
if(/Android (\d+\.\d+)/.test(ua)){
return 'Android' + RegExp["$1"];
}
}
console.log(whichMobile())//Android 5.1

BOM之navigator对象和用户代理检测的更多相关文章

  1. JavaScript navigator 对象(转)

    navigator -- navigator对象通常用于检测浏览器与操作系统的版本 navigator,中文"导航器" 引用网址:http://www.dreamdu.com/ja ...

  2. JavaScript浏览器检测之navigator 对象

    一.使用客户端检测的原因 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能: 但在现实中 ...

  3. 浏览器检测navigator 对象

    1.浏览器及版本号不同的浏览器支持的功能.属性和方法各有不同.比如IE 和Firefox 显示的页面可能就会有所略微不同. alert('浏览器名称:' + navigator.appName); a ...

  4. Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

    window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...

  5. BOM之navigator、history、screen对象

    navigator对象 [定义] navigator已经成为识别客户端浏览器的事实标准.下表中列出存在于所有浏览器的属性和方法 [检测插件] 检测浏览器插件是一种最常见的检测例程. [1]对于非IE浏 ...

  6. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  7. JS BOM基础 全局对象 window location history screen navigator

    全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...

  8. JS window对象 Navigator对象 Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

    Navigator对象 Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本. 对象属性: 查看浏览器的名称和版本,代码如下: <script type=" ...

  9. BOM 3.1 location对象 | history对象 | navigator对象 | 定时器 | 三大系列

    JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM---& ...

随机推荐

  1. Python2.7-datetime

    datetime 模块用于操作日期时间模块内定义了5个类:date,time,datetime,timedelta,tzinfo 1.timedelta对象,代表一个时间间隔datetime.time ...

  2. C++之C++的词法单位

    C++的字符集 ASCII码字符集是计算机中的常用字符集.它包括英文字母及阿拉伯数字等128个字符,存储一个ASCII码占用一个字节单元. 由于汉字处理的需要,又出现了汉字国标码等对应于不同语言的字符 ...

  3. Mac 下搭建服务器

    1.开启服务器 Apache. sudo apachectl -k start 打开浏览器,在地址栏输入 localhost,如果出现 It works! 那么第一步已经成功了,如果没成功---出门左 ...

  4. 添加mysqld、apache服务到windows服务

    mysqld --install   “d:\apache\bin\httpd.exe” -k install

  5. jQuery上传文件

    1.引入资源 <script src="/yami/backend/backres/js/jquery.min.js"></script> <scri ...

  6. SAP调用RestfulApi接口接收数据

    因为准备要做一个关于调用外部接口的需求,所以自己先练习一下. 程序说明:我已经在.net开发的系统里提供一个api接口,现在在sap访问这个接口,来接收数据. 这里涉及Restful Api知识,以后 ...

  7. Python学习系列:PyCharm CE 安装与测试

    开坑啦开坑啦~最近比赛要用Python了,开始强行学习. Mac下PyCharm CE 安装 先去百度PyCharm,一个很好用IDE,下载免费版的就够用啦: https://www.jetbrain ...

  8. PostgreSQL安装和配置---Ubuntu

    PostgreSQL安装和配置---Ubuntu

  9. 解决Git在添加ignore文件之前就提交了项目无法再过滤问题

    由于未添加ignore文件造成提交的项目很大(包含生成的二进制文件).所以我们可以将编译生成的文件进行过滤,避免添加到版本库中了. 首先为避免冲突需要先同步下远程仓库 $ git pull 在本地项目 ...

  10. dotnet core webapi 发布部署到docker的步骤

    1. 创建web api项目,编译并测试成功 2. 在项目的根目录添加Dockerfile文件,注意:Dockerfile文件名区分大小写 文件内容如下 # 基于microsoft/dotnet:la ...