搜尋
首頁web前端js教程以JavaScript顯示瀏覽器客戶端資訊的超相近教學_基礎知識

以JavaScript顯示瀏覽器客戶端資訊的超相近教學_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:54 PM
javascript瀏覽器

　1. Firefox

　　Gecko是firefox的呈現引擎。當初的Gecko是作為通用Mozilla瀏覽器一部分開發的，而第一個採用Gecko引擎的瀏覽器是Netscape6；

　　我們可以使用用戶代理偵測下：如下JS程式碼：

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

　　在windows下firefox下列印如下：

　　

複製程式碼 程式碼如下:
Mozilla/5.0 (Windows NT 6.1 WOW640); /20100101 Firefox/38.0

　　上述是為Netscape6所寫的代理字串一些構成：如下：

  • 　　Mozilla/Mozilla版本號(平台；加密類型；作業系統或CPU；預先發行的版本；Gecko/Gecko版本號；應用程式或產品/應用程式或產品版本號)；

　　2. Safari

 　　Safari的呈現引擎是WebKit；是Linux平台中Konqueror瀏覽器的呈現引擎KHTML的一個分支；幾年後，webkit獨立出來成為一個開源項目，專注於呈現引擎開發；

　　如下碼：

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

　　在windows下safari下列印如下：

　　

複製程式碼 程式碼如下:
Mozilla/5.0 (Windows NT 6.1 WOW644). (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

　　Webkit的使用者代理字串具備以下格式：

  • 　　Mozilla/5.0 (平台;加密類型;作業系統或cpu) AppleWebkit/AppleWebkit版本號(KHTML,like Gecko) safari/safari版本號；

　　3. Chrome

　　谷歌公司的chrome瀏覽器以webkit作為呈現引擎，使用了不同的javascript引擎；

　　如下JS代碼：

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

　　在windows下chrome下列印如下：

　　

複製程式碼 程式碼如下:
Mozilla/5.0 (Windows NT 6.1 WOW64) , like Gecko) Chrome/42.0.2311.152 Safari/537.36

　　用戶代理字串完全自取webkit，只加入了一段表示chrome版本號資訊；格式如下：

  • 　　Mozilla/5.0 (平台；加密類型；作業系統或cpu) AppleWebKit/AppleWebKit版本號(KHTML,like Gecko) chrome/chrome版本號 safari/safari版本號

　　4.  Opera

　　Opera預設的用戶代理字串是所有現代瀏覽器中最合理的---正確地標識了自身極其版本號，在Opera8.0之前；其用戶代理字串採用如下格式：

  • 　　Opera/ 版本號 (作業系統或CPU；加密類型) [語言]
  • 　　Opera8發布後，使用者代理字串的 「語言」部分被移到圓括號內，以便更好地與其他瀏覽器匹配；如下所示：
  • 　　Opera/版本號 (作業系統或CPU；加密類型；語言)

　　在現在的最新的版本opera29，

　　如下JS代碼：

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

　　透過代理偵測如下：

　　

複製程式碼 程式碼如下:
Mozilla/5.0 (Windows NT 6.1 WOW64) , like Gecko) Chrome/42.0.2311.152 Safari/537.36 OPR/29.0.1795.60；

　　5.  IE

　　自從IE3以來，微軟已經將IE的用戶代理字串修改成相容Netscape的形式，結構如下：

　　Mozilla/版本號(平台;加密類型；作業系統或CPU)；

　　但是IE8 的用戶代理字串加入了呈現引擎的(Trident)的版本號；

　　JS程式碼如下：

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

　　例如在window下 IE7的如下：

　　

複製程式碼 程式碼如下:
mozilla/4.0 (compatible; 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

　　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);如下所示：

201561895054617.png (451×98)

但是呢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)

　　截图如下：

201561895129434.png (296×161)

如果我想知道是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 (&#63;:iphone )&#63;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);
     }

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
C和JavaScript：連接解釋C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
4 週前ByDDD
顯示更多

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7666
15
CakePHP 教程
1393
52
C# 教程
1205
24
steam的賬戶名稱是什麼格式
91
11
win11激活密鑰永久
73
19
顯示更多