这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了用 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; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
上述是为 Netscape6 编写的代理字符串一些构成:如下:
2. Safari
Safari 的呈现引擎是 WebKit;是 Linux 平台中 Konqueror 浏览器的呈现引擎 KHTML 的一个分支;几年后,webkit 独立出来成为一个开源项目,专注于呈现引擎开发;
如下代码:
- var ua = navigator.userAgent;
- console.log(ua);
在 windows 下 safari 下打印如下:
- Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
Webkit 的用户代理字符串具备如下格式:
3. Chrome
谷歌公司的 chrome 浏览器以 webkit 作为呈现引擎,使用了不同的 javascript 引擎;
如下 JS 代码:
- var ua = navigator.userAgent;
- console.log(ua);
在 windows 下 chrome 下打印如下:
- Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.152 Safari/537.36
用户代理字符串完全自取 webkit,只添加了一段表示 chrome 版本号信息;格式如下:
4. Opera
Opera 默认的用户代理字符串是所有现代浏览器中最合理的 --- 正确地标识了自身极其版本号,在 Opera8.0 之前;其用户代理字符串采用如下格式:
在现在的最新的版本 opera29,
如下 JS 代码:
- var ua = navigator.userAgent;
- 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;
5. IE
自从 IE3 以来,微软已经将 IE 的用户代理字符串修改成兼容 Netscape 的形式,结构如下:
Mozilla / 版本号 (平台; 加密类型;操作系统或 CPU);
但是 IE8 + 的用户代理字符串添加了呈现引擎的 (Trident) 的版本号;
JS 代码如下:
- var ua = navigator.userAgent.toLowerCase();
- console.log(ua);
比如在 window 下 IE7 的如下:
- mozilla/4.0 (compatible; msie 7.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)
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 设备的基本格式如下:
Android 浏览器中默认格式与 IOS 格式相似,没有移动版本号 (但有 Mobile 记号):
7. Konqueror
与 KDE Linux 集成的 Konqueror,是一款基于 KHTML 开源呈现引擎的浏览器。尽管 Konqueror 只
能在 Linux 中使用,但它也有数量可观的用户。为确保最大限度的兼容性,Konqueror 效仿 IE 选择了如
下用户代理字符串格式:
不过,为了与 WebKit 的用户代理字符串的变化保持一致,Konqueror 3.2 又有了变化,以如下格式
将自己标识为 KHTML:
下面是一个例子:
- 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 版本
- 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; //不能真正检测出来,所以只能猜测
- }
- }
- //检测Android 版本
- if (/android (\d+\.\d+)/.test(ua)){
- system.android = parseFloat(RegExp.$1);
- }
访问网页:
- 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 (?:iphone )?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);
- }
来源: http://www.phperz.com/article/17/0416/270798.html