BOM之navigator对象和用户代理检测

前面的话

  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

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CF888G XOR-MST 最小异或生成树

CF888G XOR-MST 链接 CF888G 思路 trie上贪心&#xff0c;先左右两边连边&#xff0c;再用一条边的代价连起左右两颗树。因为内部的边一定比跨两棵树的边权笑&#xff0c;显然是对的。 代码自己瞎yy的。启发式合并 代码 #include <bits/stdc.h> #define ll long long usi…

页面事件的控制

1.设置默认焦点ASP.NET1.1中设置方法&#xff1a;<body onload"document.getElementById(TextBox1).focus();"><body onkeydown"document.all(TextBox1).focus();">ASP.NET2.0中设置方法&#xff1a;<form id"Form1"method"…

简而言之,JUnit:测试结构

尽管存在关于JUnit测试的书籍和文章&#xff0c;但我仍然经常遇到程序员&#xff0c;他们至多对这个工具及其正确用法都不甚了解。 因此&#xff0c;我想到了编写多部分教程的想法&#xff0c;从我的角度解释了要点。 也许在这个小型系列中采用的动手方法可能适合使一两个额外…

cf1207解题报告

cf1207解题报告 A 模拟 #include <bits/stdc.h> #define ll long long using namespace std; ll T,a,b,c,x,y; int main() {cin>>T;while(T --> 0) {cin>>a>>b>>c>>x>>y;ll ans0;if(x>y) {while(a>2&&b>1) ansx…

Oracle 用脚本安装第二个数据库

安装第二个数据库&#xff1a;登录oracle用户进入家目录&#xff0c;添加配置环境变量&#xff1a;vi .bash_profier ORACLE_SIDprod2临时环境变量&#xff1a;$export ORACLE_HOME/u01/app/oracle/product/11.2.0/db_1 $export ORACLE_SIDprod2创建第二个数据库文件目录&#…

深入学习jQuery鼠标事件

前面的话 鼠标事件是DOM事件中最常用的事件&#xff0c;jQuery对鼠标事件进行了封装和扩展。本文将详细介绍jQuery鼠标事件 类型 鼠标事件共10类&#xff0c;包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave c…

智能自动PPR更改事件策略

ADF开发人员普遍认为&#xff0c;将迭代器绑定更改事件策略设置为ppr在性能方面不是一件好事&#xff0c;因为此策略会强制框架刷新每个请求上绑定到此迭代器的所有属性绑定。 这不是真的&#xff01; 框架仅刷新在请求期间已更改的属性和依赖于已更改属性的属性。 让我们考虑…

[转]国际化: 理解Java平台上的Locale

From:http://jatula.javaeye.com/blog/183680 语言和地理环境对我们的文化产生重要影响.我们同他人之间的交流以及生活中的事件都发生在语言和地理环境所产生的一个系统里.由于语言和环境的不同,以至 需要我们来制定一个适合的方式来达到向他人表述我们自己或者我们的想法的目的…

深入学习jQuery描述文本内容的3个方法

前面的话 在javascript中&#xff0c;描述元素内容有5个属性&#xff0c;分别是innerHTML、outerHTML、innerText、outerText和textContent。这5个属性各自有各自的功能&#xff0c;且兼容性不同。jQuery针对这样的处理提供了3个便捷的方法&#xff0c;分别是&#xff1a;html(…

luoguP4551最长异或路径

P4551最长异或路径 链接 luogu 思路 从\(1\)开始\(dfs\)求出\(xor\)路径。然后根据性质\(x\)到\(y\)的\(xor\)路径就是\(xo[x]^xo[y]\) 代码 #include <bits/stdc.h> using namespace std; const int _1e57; int xo[_],w[_],ans-1,num0; struct node {int v,q,nxt; }e[_&…

谈一谈我的996 (随笔)

说一说996这个最近技术圈比较热门的话题。 什么是996&#xff0c;早九晚九一周上班6天。 看朋友圈&#xff0c;有个朋友说自己没有经历过什么是996&#xff0c;感觉自己是个假的程序员&#xff0c;是不是程序员就应该加班呢&#xff0c;是不是已经下意识&#xff0c;大众性的认…

装饰器设计模式的应用

嗨&#xff0c;您好&#xff01; 今天&#xff0c;我将展示装饰设计模式的实际应用。 装饰器设计模式是一种广泛使用的设计模式&#xff0c;同时在运行期间处理图形&#xff0c;树木和动态更改。 如果您正在寻找或尝试进行递归&#xff0c;这也是一个不错的选择。 我喜欢它。…

ubuntu postgresql 的安装

本人亲测&#xff0c;在ubuntu9.10上安装的postgresql 8.3版本。郁闷了好几天&#xff0c;终于ok了。sudo apt-get install postgresql-8.3 postgresql-client-8.3 postgresql-contrib-8.3然后在/etc/profile里加上export POSTGRES_HOME/usr/lib/postgresql/8.3export PGLIB$PO…

loj2090. 「ZJOI2016」旅行者

loj2090. 「ZJOI2016」旅行者 链接 loj 思路 \((l,mid)(mid1,r)\).考虑跨过mid的贡献。 假设选的中间那条线的点为gzy,贡献为\(dis(x,gzy)dis(gzy,y)\) 那就计算n遍最短路,一次分治为\(n^2mlog{nm}\) 设Sn*m.矩阵的长度是不定的&#xff0c;每次取最长的边进行分治是最好的&…

利用select实现年月日三级联动的日期选择效果

前面的话 关于select控件&#xff0c;可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践&#xff0c;下面将对日期选择效果进行详细介绍 演示 style"width: 100%; height: 80px;" src"https://demo.xiaohuochai.site/js/date/d2.html&…

ubuntu资料

1、VNC实现Windows远程访问Ubuntu 16.04&#xff08;无需安装第三方桌面,直接使用自带远程工具&#xff09; https://www.cnblogs.com/xuliangxing/p/7642650.html 转载于:https://www.cnblogs.com/little-kwy/p/10761865.html

守护基于JVM的应用程序

部署体系结构设计是任何定制服务器端应用程序开发项目的重要组成部分。 由于其重要性&#xff0c;部署架构设计应尽早开始&#xff0c;并与其他开发活动一起进行。 部署体系结构设计的复杂性取决于许多方面&#xff0c;包括所提供服务的可伸缩性和可用性目标&#xff0c;部署过…

开篇

进入软件行业已有数日&#xff0c;但终归还算是新手。 对程序员有点好奇&#xff0c;所以选择这个职业&#xff0c;从现在开始希望能够记下自己从业当中的点点滴滴&#xff0c;同时希望自己也能够一直坚持下去。转载于:https://www.cnblogs.com/gaser/archive/2009/11/22/16082…

构造函数 基本使用

相关知识点&#xff1a; 构造函数、原型对象、实例对象 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta h…

2019CCPC网络预选赛 八道签到题题解

目录 2019中国大学生程序设计竞赛&#xff08;CCPC&#xff09; - 网络选拔赛6702 &6703 array6704 K-th occurrence6705 path6706 huntian oy6707 Shuffle Card6708 Windows Of CCPC6709 Fishing Master 2019中国大学生程序设计竞赛&#xff08;CCPC&#xff09; - 网络选…