Un tutoriel très similaire pour afficher les informations du client du navigateur avec les connaissances JavaScript_Basic

1. Firefox

Gecko est le moteur de rendu de Firefox. Gecko a été initialement développé dans le cadre du navigateur universel Mozilla, et le premier navigateur à utiliser le moteur Gecko était Netscape6 ;

On peut utiliser la détection d'agent utilisateur : le code JS suivant :

var ua = navigator.userAgent;
console.log(ua);

L'impression sous Firefox sous Windows est la suivante :

　

Copier le code Le code est le suivant :

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

Ci-dessus sont quelques compositions de chaînes proxy écrites pour Netscape6 : comme suit :

Numéro de version de Mozilla/Mozilla (plate-forme ; type de cryptage ; système d'exploitation ou processeur ; version préliminaire ; numéro de version de Gecko/Gecko ; application ou produit/application ou numéro de version du produit) ;

　2. Safari

Le moteur de rendu de Safari est WebKit ; c'est une branche de KHTML, le moteur de rendu du navigateur Konqueror sur la plateforme Linux ; quelques années plus tard, webkit est devenu un projet open source indépendant, axé sur le développement de moteurs de rendu ;

Le code suivant :

var ua = navigator.userAgent;
console.log(ua);

L'impression dans Safari sous Windows est la suivante :

　

Copier le code Le code est le suivant :Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/ 534.57.2 (KHTML, comme Gecko) Version/5.1.7 Safari/534.57.2

La chaîne de l'agent utilisateur de Webkit a le format suivant :

Mozilla/5.0 (plate-forme ; type de cryptage ; système d'exploitation ou processeur) Numéro de version AppleWebkit/AppleWebkit (KHTML, comme Gecko) Numéro de version safari/safari

　3. Chrome

Le navigateur Chrome de Google utilise Webkit comme moteur de rendu et utilise différents moteurs javascript

 ;

Le code JS suivant :

var ua = navigator.userAgent;
console.log(ua);

L'impression sous chrome sous windows est la suivante :

　

Copier le code Le code est le suivant :Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/ 537.36 (KHTML, comme Gecko) Chrome/42.0.2311.152 Safari/537.36

La chaîne de l'agent utilisateur est entièrement extraite du webkit, et seule une information indiquant le numéro de version de Chrome est ajoutée ; le format est le suivant :

Mozilla/5.0 (plate-forme ; type de cryptage ; système d'exploitation ou processeur) Numéro de version AppleWebKit/AppleWebKit (KHTML, comme Gecko) Numéro de version chrome/chrome Numéro de version safari/safari

　4. Opéra

La chaîne d'agent utilisateur par défaut d'Opera est la plus raisonnable parmi tous les navigateurs modernes --- elle s'identifie correctement ainsi que son numéro de version, avant qu'Opera8.0 n'adopte le format suivant :

　Opéra/numéro de version (système d'exploitation ou CPU ; type de cryptage) [Langue]

• Après la sortie d'Opera 8, la partie « langue » de la chaîne de l'agent utilisateur a été déplacée entre parenthèses pour mieux correspondre aux autres navigateurs, comme indiqué ci-dessous :
• 　Numéro d'opéra/version (système d'exploitation ou CPU ; type de cryptage ; langue)
Dans la dernière version opera29,

Le code JS suivant :

var ua = navigator.userAgent;
console.log(ua);

La détection du proxy est la suivante :

　

Copier le code Le code est le suivant :Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/ 537.36 (KHTML, comme Gecko) Chrome/42.0.2311.152 Safari/537.36 OPR/29.0.1795.60

5. IE

Depuis IE3, Microsoft a modifié la chaîne de l'agent utilisateur d'IE pour être compatible avec Netscape. La structure est la suivante :

Mozilla/numéro de version (plate-forme ; type de cryptage ; système d'exploitation ou CPU

) ;

Mais la chaîne de l'agent utilisateur d'IE8 ajoute le numéro de version du moteur de rendu (Trident)

 ;

Le code JS est le suivant :

var ua = navigator.userAgent.toLowerCase();
console.log(ua);

Par exemple, sous la fenêtre IE7 c'est comme suit :

　

Copier le code Le code est le suivant :mozilla/4.0 (compatible ; msie 7.0 ; windows nt 6.1 ; wow64 ; trident/slcc2 ; .net clr 2.0.50727 ; .net clr 3.0.30729 ; 🎜>

　　IE8的如下：

　　

复制代码 代码如下:

mozilla/4.0 (compatible; msie 8.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

　　但是IE9+ 对字符串的格式做了一点调整；mozilla的版本号增加到5.0;

　　IE9的如下：

　　

复制代码 代码如下:

mozilla/5.0 (compatible; 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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

　　IE10的如下：

复制代码 代码如下:

mozilla/5.0 (compatible; msie 10.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

　　IE11的如下：

　　

复制代码 代码如下:

mozilla/5.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e; rv:11.0) like gecko

　　6. IOS和Android

　　移动操作系统IOS和Android默认的浏览器都是基于webkit;而且都像桌面版一样；共享相同的基本用户代理字符串格式；ios设备的基本格式如下：

• 　　Mozilla/5.0 (平台；加密类型；操作系统或CPU like Mac OS x;语言)
• 　　AppleWebKit/ AppleWebKit版本号(KHTML,like Gecko) Version/浏览器版本号
• 　　Mobile/移动版本号 Safari/Safari版本号

　　Android浏览器中默认格式与IOS格式相似，没有移动版本号(但有Mobile记号)：

• 　　Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91)
• 　　AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

　　7. Konqueror

　　与KDE Linux 集成的Konqueror，是一款基于KHTML 开源呈现引擎的浏览器。尽管Konqueror 只

　　能在Linux 中使用，但它也有数量可观的用户。为确保最大限度的兼容性，Konqueror 效仿IE 选择了如

　　下用户代理字符串格式：

• 　　Mozilla/5.0 (compatible; Konqueror/ 版本号; 操作系统或CPU )

　　不过，为了与WebKit 的用户代理字符串的变化保持一致，Konqueror 3.2 又有了变化，以如下格式

　　将自己标识为KHTML：

• 　　Mozilla/5.0 (compatible; Konqueror/ 版本号; 操作系统或CPU) KHTML/ KHTML 版本号 (like Gecko)

　　下面是一个例子：

　　

复制代码 代码如下:

Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)

　　用户代理字符串检测技术
　　识别呈现引擎；

　　下面我们主要检测五大呈现引擎：IE，Gecko，WebKit，KHTML和Opera

　　如下代码：

var client = function(){
  var engine = {
    // 呈现引擎
    ie: 0,
    gecko:0,
    webkit: 0,
    khtml:0,
    opera:0,
    //其他版本号
    ver: null
  };
  // 在此检测呈现引擎，平台和设备
  return {
    engine: engine
  };
}();

　　在如上client对象字面量中，每个呈现引擎都对应着一个属性，属性值默认为0；如果检测到了那个呈现引擎，那么将以浮点数值形式将引擎的版本号写入相应的属性。而呈现引擎的完整版本被写入变量ver属性中；

　　要正确识别呈现引擎，关键是检测顺序要正确，用户代理字符串存在诸多不一致的地方，如果检测顺序不对，很可能会导致检测结果不正确，因此，第一步就是识别Opera，因为它的用户代理字符串有可能模仿其他浏览器；目前最新的opera浏览器版本是29，所以如下：

　　

var ua = navigator.userAgent .toLowerCase();

　　console.log(ua);

　　打印如下：

　　

复制代码 代码如下:

mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.36 (khtml, like gecko) chrome/42.0.2311.152 safari/537.36 opr/29.0.1795.60

　　因此可以这样判断代码；如下：

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/)) {
  var result = ua.match(/opr\/([\d\.]+)/);
  console.log(result)
  console.log(result[1])
}

　　执行如下：

　　console.log(result);打印如下：

　　

复制代码 代码如下:

["opr/29.0.1795.60", "29.0.1795.60", index: 110, input: "mozilla/5.0 (windows nt 6.1; wow64) applewebkit/53…rome/42.0.2311.152 safari/537.36 opr/29.0.1795.60"]；

　　console.log(result[1])打印如下：

　　

复制代码 代码如下:

29.0.1795.60

　　由此；我们可以这样编写代码；如下：

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/)) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
}

　　现在我们来打印下console.log(engine);如下所示：

但是呢opera29之前的版本， Opera5+也有window.opera对象，所以我们也必须检测window.opera对象，我们可以调用version()方法可以返回一个表示浏览器版本的字符串；如下代码：

if(window.opera) {
  engine.ver = window.opera.version();
  engine.opera = parseFloat(engine.ver);
}

　　现在我们为了兼容之前及之后的opera浏览器，我们可以综合一下；如下：

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
  }
}

　　现在第二步需要检测的是引擎是WebKit，因为WebKit的用户代理字符串中包含”Gecko”和”KHTML”这两个字符串，如果检测这两个，可能会有误差，但是WebKit的用户代理字符串中的”AppleWebKit”是独一无二的，因此可以根据这个来检测；

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
}

　　因此综合以上的所有代码如下：

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
  }
}else if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
}

　　接下来要测试的呈现引擎是KHTML，同样，KHTML的用户代理字符串中也包含”Gecko”,因此在排除KHTML之前，我们无法准确检测基于Gecko浏览器。KHTML的版本号与WebKit的版本号在用户代理字符串中的格式差不多，因此也可以使用正则表达式，此外，由于Konqueror 3.1 及更早版本中不包含KHTML 的版本，故而就要使用Konqueror 的版本来代替。下面就是相应的检测代码。

if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.khtml = parseFloat(engine.ver);
}

　　下面是所有的代码：

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
  }
}else if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.khtml = parseFloat(engine.ver);
}

　　在排除WebKit和KHTML后，就可以准确检测Gecko了，但是在用户代理字符串中，Gecko的版本号不会出现在字符串”Gecko”的后面，而是会出现在字符串”rv:”的后面。因此必须使用一个更复杂的正则表达式；

　　比如 firefox下的用户代理如下：

　　

复制代码 代码如下:

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

　　如下JS代码检测：

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.gecko = parseFloat(engine.ver);
}

　　所以所有的JS代码如下：

var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
  }
}else if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.khtml = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.gecko = parseFloat(engine.ver);
}

　　最后一个检测就是IE浏览器了，IE的版本号位于字符串”msie”的后面，一个分号的前面；如下：

　　

复制代码 代码如下:

mozilla/5.0 (compatible; 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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

　　如下JS代码检测：

if (/msie ([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.ie = parseFloat(engine.ver);
}

　　如上；所有的代码如下：

var client = function(){
  var engine = {
    // 呈现引擎
    ie: 0,
    gecko:0,
    webkit: 0,
    khtml:0,
    opera:0,
    //其他版本号
    ver: null
  };
  // 在此检测呈现引擎，平台和设备
  return {
    engine: engine
  };
}();
var engine = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = result[1];
  engine.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
  }
}else if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.khtml = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.gecko = parseFloat(engine.ver);
}else if (/msie ([^;]+)/.test(ua)){
  engine.ver = RegExp["$1"];
  engine.ie = parseFloat(engine.ver);
}

　　识别浏览器

　　大多数情况下，如上面识别了引擎还不能满足我们的需求，比如苹果公司的safari浏览器和谷歌的chrome浏览器都使用了webkit作为呈现引擎；但他们的javascript引擎且不一样，在这两个浏览器中，client.webkit都会返回非0值，无法区别，因此我们还需要识别下浏览器；

　　如下增加代码如下：

var client = function(){
  var engine = {
      // 呈现引擎
      ie: 0,
      gecko:0,
      webkit: 0,
      khtml:0,
      opera:0,
      //其他版本号
      ver: null
    };
  var browser = {
      // 浏览器
      ie: 0,
      firefox:0,
      safari:0,
      konq:0,
      opera:0,
      chrome:0,
      // 其他的版本
      ver: null
    };
    // 在此检测呈现引擎，平台和设备
    return {
      engine: engine,
      browser: browser
    };
}();

　　如上代码增加了私有变量browser,用于保存每个主要浏览器的属性，与engine变量一样，除了当前使用的浏览器，其他属性值将保持为0；如果是当前使用的浏览器，则这个属性中保存的是浮点数值形式的版本号，同样browser中的ver属性中在必要时将包含字符串形式的浏览器完整版本号；

　　因此封装后的所有JS代码如下：

var client = function(){
  var engine = {
    // 呈现引擎
    ie: 0,
    gecko:0,
    webkit: 0,
    khtml:0,
    opera:0,
    //其他版本号
    ver: null
  };
  var browser = {
    // 浏览器
    ie: 0,
    firefox:0,
    safari:0,
    konq:0,
    opera:0,
    chrome:0,
    // 其他的版本
    ver: null
  };
  // 在此检测呈现引擎，平台和设备
  return {
    engine: engine,
    browser: browser
  };
}();
var engine = client;
var browser = client;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
  var result = ua.match(/opr\/([\d\.]+)/);
  engine.ver = browser.ver = result[1];
  engine.opera = browser.opera = parseFloat(engine.ver);
  if(window.opera) {
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
  }
}else if(/applewebkit\/(\S+)/.test(ua)) {
  engine.ver = RegExp["$1"];
  engine.webkit = parseFloat(engine.ver);
  // 确定是chrome还是safari
  /*
   * chrome用户代理字符串
   * Mozilla/5.0 (Windows NT 6.1; WOW64)    AppleWebKit/537.36 (KHTML, like Gecko) 
   * Chrome/42.0.2311.152 Safari/537.36
   */
  if(/chrome\/(\S+)/.test(ua)) {
    browser.ver = RegExp["$1"];
    browser.chrome = parseFloat(browser.ver);
  }else if(/version\/(\S+)/.test(ua)) {
    /*
     * safari用户代理字符串
     * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) 
     * Version/5.1.7 Safari/534.57.2
     */
    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.safari = browser.ver = safariVersion;
  }
}else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    /*
     * firefox的用户代理的字符串
     * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) 
     * Gecko/20100101 Firefox/38.0
     */
    // 确定是不是firefox
    if(/firefox\/(\S+)/.test(ua)) {
      browser.ver = RegExp["$1"];
      browser.firefox = parseFloat(browser.ver);
    }
}else if (/msie ([^;]+)/.test(ua) || "ActiveXObject" in window){
  if("ActiveXObject" in window) {
    if(/msie ([^;]+)/.test(ua)) {
      engine.ver = browser.ver = RegExp["1"];       engine.ie = browser.ie = parseFloat(engine.ver);     }else {       // ie11+       if(/rv:([^\)]+)\)/.test(ua)) {         engine.ver = browser.ver = RegExp["1"];       engine.ie = browser.ie = parseFloat(engine.ver);     }else {       // ie11+       if(/rv:([^\)]+)\)/.test(ua)) {         engine.ver = browser.ver = RegExp["1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
      }
    }
  }
  }
// 可以打印下
console.log(browser);

　　对opera和IE而言，browser对象中的值等于engine对象中值，对Konqueror 而言，browser.

　　konq 和browser.ver 属性分别等于engine.khtml 和engine.ver 属性。为了检测Chrome 和Safari，我们在检测引擎的代码中添加了if 语句。提取Chrome 的版本号时，需要查找字符串"chrome/"并取得该字符串后面的数值。而提取Safari 的版本号时，则需要查找字符串"version/"并取得其后的数值。由于这种方式仅适用于Safari 3 及更高版本，因此需要一些备用的代码，将WebKit 的版本号近似地映射为Safari 的版本号(至于else后面的就不多讲)。在检测Firefox 的版本时，首先要找到字符串"firefox/"，然后提取出该字符串后面的数值。

　　有了上面的代码，我们就可以编写下面的代码判断了，如下代码：

if (client.engine.webkit) { 
  //if it's WebKit
  if (client.browser.chrome){
    //执行针对Chrome 的代码
  } else if (client.browser.safari){
    //执行针对Safari 的代码
  }
} else if (client.engine.gecko){
  if (client.browser.firefox){
    //执行针对Firefox 的代码
  } else {
    //执行针对其他Gecko 浏览器的代码
  }
}

　　识别平台

　　目前有三大主流平台(windows,Mac,Unix(包括各种linux))；因为那些浏览器(safari,opera,firefox)在不同的平台可能会有不同的问题；为了检测这些平台，还需要像下面这样再添加一个新对象；

var client = function(){
  var engine = {
    // 呈现引擎
    ie: 0,
    gecko:0,
    webkit: 0,
    khtml:0,
    opera:0,
    //其他版本号
    ver: null
  };
  var browser = {
    // 浏览器
    ie: 0,
    firefox:0,
    safari:0,
    konq:0,
    opera:0,
    chrome:0,
     // 其他的版本
     ver: null
   };
  var system = {
    win: false,
    mac: false,
    xll: false
  };
  // 在此检测呈现引擎，平台和设备
  return {
    engine: engine,
    browser: browser,
    system: system
  };
}();

　　如上的代码添加了一个包含3个属性的新变量system，其中，win属性表示是否为windows平台，mac代表Mac，xll代表是Unix，system的对象的属性默认都为false，在确定平台时，检测navigator.platform要比检测用户代理字符串更简单，检测用户代理字符串在不同的浏览器中会给出不同的平台信息，而navigator.platform属性可能的值包括”Win32”,”Win64”,”MacPPC”,”MacIntel”,”Xll”和”Linux i686”,这些值在不同的浏览器中都是一致的，检测代码非常直观；如下代码：

var system = client;
var platform = navigator.platform;
system.win = platform.indexOf("Win") == 0;
system.mac = platform.indexOf("Mac") == 0;
system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);

　　比如我现在在chrome浏览器下打印如下：

　　console.log(system)

　　截图如下：

如果我想知道是win32或者是win64的话，我们可以使用这句代码打印即可

　　

Console.log(navigator.platform);

　　识别移动设备

　　可以通过简单地检测字符串”iPhone”,”iPod”,”iPad”,就可以分别设置响应属性的值了。

system.iphone = ua.indexOf(“iphone”) > -1;
system.ipod = ua.indexOf(“ipod”) > -1;
system.ipad = ua.indexOf(“ipad”) > -1; 

• 　　除了知道iOS 设备，最好还能知道iOS 的版本号。在iOS 3 之前，用户代理字符串中只包含"CPU like
• 　　Mac OS"，后来iPhone 中又改成"CPU iPhone OS 3_0 like Mac OS X"，iPad 中又改成"CPU OS 3_2
• 　　like Mac OS X"。也就是说，检测iOS 需要正则表达式反映这些变化。

//检测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; //不能真正检测出来，所以只能猜测
  }
}

• 　　检查系统是不是Mac OS、字符串中是否存在"Mobile"，可以保证无论是什么版本，system.ios
• 　　中都不会是0。然后，再使用正则表达式确定是否存在iOS 的版本号。如果有，将system.ios 设置为
• 　　表示版本号的浮点值；否则，将版本设置为2。（因为没有办法确定到底是什么版本，所以设置为更早的
• 　　版本比较稳妥。）
• 　　检测Android 操作系统也很简单，也就是搜索字符串"Android"并取得紧随其后的版本号。

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

• 　　由于所有版本的Android 都有版本值，因此这个正则表达式可以精确地检测所有版本，并将
• 　　system.android 设置为正确的值。
• 　　在了解这些设备信息的基础上，就可以通过下列代码来确定用户使用的是什么设备中的WebKit 来

　　访问网页：

if (client.engine.webkit){
  if (client.system.ios){
     //iOS 手机的内容
  } else if (client.system.android){
    //Android 手机的内容
  } 
}

　　因此所有的JS代码如下：

var client = function(){
     var engine = {
       // 呈现引擎
       ie: 0,
       gecko:0,
       webkit: 0,
       khtml:0,
       opera:0,
       //其他版本号
       ver: null
     };
     var browser = {
       // 浏览器
       ie: 0,
       firefox:0,
       safari:0,
       konq:0,
       opera:0,
       chrome:0,
       // 其他的版本
       ver: null
     };
     var system = {
       win: false,
       mac: false,
       xll: false,
       // 移动设备
       iphone: false,
       ipod: false,
       ipad: false,
       ios: false,
       android:false
      };
      // 在此检测呈现引擎，平台和设备
      return {
        engine: engine,
        browser: browser,
        system: system
      };
    }();
    var engine = client;
    var browser = client;
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
      var result = ua.match(/opr\/([\d\.]+)/);
      engine.ver = browser.ver = result[1];
      engine.opera = browser.opera = parseFloat(engine.ver);
      if(window.opera) {
         engine.ver = browser.ver = window.opera.version();
         engine.opera = browser.opera = parseFloat(engine.ver);
       }
    }else if(/applewebkit\/(\S+)/.test(ua)) {
      engine.ver = RegExp["$1"];
      engine.webkit = parseFloat(engine.ver);
      // 确定是chrome还是safari
      /*
       * chrome用户代理字符串
       * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) 
       * Chrome/42.0.2311.152 Safari/537.36
       */
       if(/chrome\/(\S+)/.test(ua)) {
         browser.ver = RegExp["$1"];
         browser.chrome = parseFloat(browser.ver);
       }else if(/version\/(\S+)/.test(ua)) {
         /*
          * safari用户代理字符串
          * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) 
          * Version/5.1.7 Safari/534.57.2
          */
         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.safari = browser.ver = safariVersion;
       }
    }else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
       engine.ver = browser.ver = RegExp["$1"];
       engine.khtml = browser.konq = parseFloat(engine.ver);

    }else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
       engine.ver = RegExp["$1"];
       engine.gecko = parseFloat(engine.ver);
       /*
        * firefox的用户代理的字符串
        * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) 
        * Gecko/20100101 Firefox/38.0
        */
       // 确定是不是firefox
       if(/firefox\/(\S+)/.test(ua)) {
         browser.ver = RegExp["$1"];
         browser.firefox = parseFloat(browser.ver);
       }
     }else if (/msie ([^;]+)/.test(ua) || "ActiveXObject" in window){
       if("ActiveXObject" in window) {
         if(/msie ([^;]+)/.test(ua)) {
          engine.ver = browser.ver = RegExp["$1"];
          engine.ie = browser.ie = parseFloat(engine.ver);
         }else {
          if(/rv:([^\)]+)\)/.test(ua)) {
            engine.ver = browser.ver = RegExp["$1"];
            engine.ie = browser.ie = parseFloat(engine.ver);
          }
         }
       }
       
     }
     // 检测平台
     var system = client;
     var platform = navigator.platform;
     system.win = platform.indexOf("Win") == 0;
     system.mac = platform.indexOf("Mac") == 0;
     system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);
      
     // 移动设备
     system.iphone = ua.indexOf("iphone") > -1;
     system.ipod = ua.indexOf("ipod") > -1;
     system.ipad = ua.indexOf("ipad") > -1;
     //检测iOS 版本
     if (system.mac && ua.indexOf("mobile") > -1){
       if (/cpu (&#63;:iphone )&#63;os (\d+_\d+)/.test(ua)){
         system.ios = parseFloat(RegExp.$1.replace("_", "."));
       } else {
         system.ios = 2; //不能真正检测出来，所以只能猜测
       }
     }
     //检测Android 版本
     if (/android (\d+\.\d+)/.test(ua)){
       system.android = parseFloat(RegExp.$1);
     }

Étiquettes associées：

javascript 浏览器

source：php.cn

Article précédent：Comment implémenter la sélection par lots et la sélection inverse des cases à cocher avec jQuery_jquery Article suivant：Comment utiliser le module glob pour rechercher les chemins de fichiers dans les connaissances Python_Basic

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...

Depuis 2024-04-06 19:25:49

0

1

505

Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...

Depuis 2024-04-06 18:16:26

0

1

403

Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...

Depuis 2024-04-06 15:35:24

0

1

274

Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...

Depuis 2024-04-06 14:54:03

0

2

421

Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...

Depuis 2024-04-06 12:53:11

0

1

376

Rubriques connexes

Plus>

• Comment obtenir la longueur d'un tableau en js
• js actualiser la page actuelle
• js arrondi
• L'ordinateur dispose d'Internet mais le navigateur ne peut pas ouvrir la page Web
• Que signifie le navigateur
• méthode js pour supprimer le nœud
• Caractères d'échappement JavaScript
• Comment générer des nombres aléatoires en js