Javascript实现检测客户端类型代码封包


Posted in Javascript onDecember 03, 2015

检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

/**
 * Author: laixiangran.
 * Created by laixiangran on 2015/12/02.
 * 检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
 * ********************************************************************
 * 各版本浏览器在windows10.0下的用户代理字符串:
 * Google Chrome 45.0.2454.85 —— "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36"
 * Opera 31.0.1889.174 —— "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36 OPR/31.0.1889.174"
 * Microsoft Edge —— "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240"
 * Firefox 40.0.3 —— "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0"
 * Internet Explorer 11+ —— "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
 * Internet Explorer 10- —— "Mozilla/5.0 (compatible; MSIE x.0; Windows NT 10.0; WOW64; Trident/8.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
 */
(function(){

  window.iClient = {};

  //呈现引擎信息
  var engine = {
    //呈现引擎
    ie: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera:0,
    //具体版本号
    ver: null
  };

  var browser = {
    //浏览器
    ie: 0,
    edge: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,
    //具体版本号
    ver: null
  };

  //平台、设备和操作系统
  var system = {
    win: false,
    mac: false,
    unix: false,

    //移动设备
    iphone: false,
    ipod: false,
    ipad: false,
    ios: false,
    android: false,
    nokiaN: false,
    winMobile: false,

    //游戏系统
    wii: false, //任天堂
    ps: false  //Playstation3
  };

  //获取浏览器的用户代理字符串
  var ua = window.navigator.userAgent;

  //检测呈现引擎和浏览器
  //检测Presto内核的Opera浏览器
  if(window.opera){
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
  }
  //检测WebKit 用代理字符串中的"AppleWebKit"进行检测
  else if(/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
    //确定Microsoft Edge
    if(/Edge\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.edge = parseFloat(browser.ver);
    }
    //确定WebKit内核Opera
    else if(/OPR\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.opera = parseFloat(browser.ver);
    }
    //确定Chrome
    else if(/Chrome\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.chrome = parseFloat(browser.ver);
    }
    //确定Safari
    else if(/Version\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.safari = parseFloat(browser.ver);
    }else{
      //近似的确定版本号
      var safariVersion = 1;
      if(engine.webkit < 100){
        safariVersion = 1;
      }else if(engine.webkit <312){
        safariVersion = 1.2;
      }else if(engine.webkit < 412){
        safariVersion = 1.3;
      }else{
        safariVersion = 2;
      }
      browser.ver = browser.safari = safariVersion;
    }
  }
  //检测KHTML 用于Konqueror3.1及更早版本中不包含KHTML的版本,故而就要使用Konqueror的版本来代替
  else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/(\S+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);s
  }
  //检测Gecko 其版本号在字符串"rv:"的后面
  else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    //确定Firefox
    if(/Firefox\/(\S+)/.test(ua)){
      browser.ver = RegExp["$1"];
      browser.firefox = parseFloat(browser.ver);
    }
  }
  //检测IE
  else if(/MSIE ([^;]+)/.test(ua) || /rv:([^\)]+)\) like Gecko/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
  }

  //获取平台或者操作系统信息,可能的值:win32、win64、MacPPC、MacIntel、Xll、Linux i686
  var p = window.navigator.platform;

  //检测平台
  system.win = p.indexOf("Win") == 0;
  system.mac = p.indexOf("Mac") == 0;
  system.unix = (p == "Xll'") || (p.indexOf("Linux") == 0);

  //检测Windows操作系统
  if(system.win){
    if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
      if(RegExp["$1"] == "NT"){
        switch(RegExp["$2"]){
          case "5.0":
            system.win = "2000";
            break;
          case "5.1":
            system.win = "XP";
            break;
          case "6.0":
            system.win = "Vista";
            break;
          case "7":
            system.win = "7";
            break;
          case "8":
            system.win = "8";
            break;
          case "8.1":
            system.win = "8.1";
            break;
          case "10.0":
            system.win = "10.0";
            break;
          default:
            system.win = "NT";
            break;
        }
      }
    }
  }

  //移动设备
  system.iphone = ua.indexOf("iPhone") > -1;
  system.ipod = ua.indexOf("iPod") > -1;
  system.ipad = ua.indexOf("iPad") > -1;
  system.nokiaN = ua.indexOf("NokiaN") > -1;

  //window mobile
  if(system.win == "CE"){
    system.winMobile = system.win;
  }else if(system.win == "Ph"){
    if(/Windows Phone OS (\d+.\d+)/.test(ua)){
      system.win = "Phone";
      system.winMobile = parseFloat(RegExp["$1"]);
    }
  }

  //检测iOS版本
  if(system.mac && ua.indexOf("Mobile") > -1){
    if(/CPU (?:iPhone )?OS (\d+.\d+)/.test(ua)){
      system.ios = parseFloat(RegExp["$1"].replace("_","."));
    }else{
      system.ios = 2; //不能真正检测出来,所以只能猜测
    }
  }

  //检测安卓版本
  if(/Android (\d+.\d+)/.test(ua)){
    system.android = parseFloat(RegExp["$1"]);
  }

  //检测游戏系统
  system.wii = ua.indexOf("wii") > -1;
  system.ps = /playstation/i.test(ua);

  window.iClient.engine = engine;
  window.iClient.browser = browser;
  window.iClient.system = system;
})();

再给大家一个简单点的实例:判断windows、linux、android

<html>
<head>
<title>判断操作系统</title>
<script type="text/javascript">
function detectOS() { 
var sUserAgent = navigator.userAgent; 

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); 
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel"); 
if (isMac) return "Mac"; 
var isUnix = (navigator.platform == "X11") && !isWin && !isMac; 
if (isUnix) return "Unix"; 
var isLinux = (String(navigator.platform).indexOf("Linux") > -1); 

var bIsAndroid = sUserAgent.toLowerCase().match(/android/i) == "android";
if (isLinux) {
if(bIsAndroid) return "Android";
else return "Linux"; 
}
if (isWin) { 
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; 
if (isWin2K) return "Win2000"; 
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || 
sUserAgent.indexOf("Windows XP") > -1; 
if (isWinXP) return "WinXP"; 
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1; 
if (isWin2003) return "Win2003"; 
var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1; 
if (isWinVista) return "WinVista"; 
var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1; 
if (isWin7) return "Win7"; 
} 
return "other"; 
} 
document.writeln("您的操作系统是:" + detectOS()); 
alert(detectOS());
</script>
</head>
<body>
</body>
</html>
Javascript 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
Javascript之datagrid查询详解
Sep 15 Javascript
javascript学习小结之prototype
Dec 03 #Javascript
简单实现JS对dom操作封装
Dec 02 #Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 #Javascript
JS折半插入排序算法实例
Dec 02 #Javascript
如何动态加载外部Javascript文件
Dec 02 #Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
You might like
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JavaScript原生数组Array常用方法
2017/04/06 Javascript
javascript回调函数详解
2018/02/06 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
新手如何发布Python项目开源包过程详解
2019/07/11 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
结构和类有什么异同
2012/07/16 面试题
最新大学职业规划书范文
2013/12/30 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
读群众路线心得体会
2014/03/07 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
小学生暑假生活总结
2015/07/13 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python