美文网首页
JavaScript客户端检测——用户代理检测

JavaScript客户端检测——用户代理检测

作者: 胖胖冰 | 来源:发表于2017-06-05 15:16 被阅读257次

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为相应首部发送的，而且该字符串可以通过JavaScript的navigator.userAgent属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。在客户端，优先级在能力检测和怪癖检测之后。
1.识别呈现引擎
检测五大呈现引擎：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
            };
        }();

要正确的识别呈现引擎，关键是检测顺序要正确。第一步是识别Opera，要识别Opera，必须得检测window.opera，调用version()方法可以返回一个表示浏览器版本的字符串。

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

放在第二位检测的呈现引擎是Webkit，WebKit用户代理字符串中的“AppleWebKit”是独一无二的，因此检测这个字符串最合适。

        var ua=navigator.userAgent;
        if(window.opera){
            engine.ver = window.opera.version();
            engine.opera = parseFloat(engine.ver);
        }else if(/AppleWebKit\/(\S+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
        }

接下来测试呈现引擎KHTML。

        var ua=navigator.userAgent;
        if(window.opera){
            engine.ver = window.opera.version();
            engine.opera = parseFloat(engine.ver);
        }else if(/AppleWebKit\/(\S+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
        }else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
            engine.ver = RegExp["$1"];
            engine.khtml=parseFloat(engine.ver);
        }

检测Gecko。

        var ua=navigator.userAgent;
        if(window.opera){
            engine.ver = window.opera.version();
            engine.opera = parseFloat(engine.ver);
        }else if(/AppleWebKit\/(\S+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
        }else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
            engine.ver = RegExp["$1"];
            engine.khtml=parseFloat(engine.ver);
        }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
            engine.ver = RegExp["$1"];
            engine.gecko=parseFloat(engine.ver);
        }

最后检测呈现引擎IE。

        var ua=navigator.userAgent;
        if(window.opera){
            engine.ver = window.opera.version();
            engine.opera = parseFloat(engine.ver);
        }else if(/AppleWebKit\/(\S+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
        }else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
            engine.ver = RegExp["$1"];
            engine.khtml=parseFloat(engine.ver);
        }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
            engine.ver = RegExp["$1"];
            engine.gecko=parseFloat(engine.ver);
        }else if(/MSIE ([^;]+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.ie=parseFloat(engine.ver);
        }

2.识别浏览器


        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 ua=navigator.userAgent;
        if(window.opera){
            engine.ver = browser.ver = window.opera.version();
            engine.opera = browser.opera = parseFloat(engine.ver);
        }else if(/AppleWebKit\/(\S+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.webkit=parseFloat(engine.ver);
            //确定是Chrome还是Safari
            if (/Chrome\/(\S+)/.test(us)) {
                browser.ver = RegExp["$1"];
                browser.chrome = parseFloat(browser.ver);
            }else if(/Version\/(\S+)/.test(us)){
                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(us)||/Konqueror\/([^;]+)/.test(us)) {
            engine.ver = browser.ver = RegExp["$1"];
            engine.khtml= browser.konq=parseFloat(engine.ver);
        }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
            engine.ver = RegExp["$1"];
            engine.gecko=parseFloat(engine.ver);
            //确定是不是Firefox
            if(/Firefox\/(/S+).test(us)){
                browser.ver = RegExp["$1"];
                browser.firefox = parseFloat(browser.ver);
            }
        }else if(/MSIE ([^;]+)/.test(us)){
            engine.ver = RegExp["$1"];
            engine.ie=parseFloat(engine.ver);
        }

        if (client.engine.webkit) {
            if(client.browser.chrome){

            }else if(client.browser.safari){

            }
        }else if(client.engine.gecko){
            if(client.browser.firefox){

            }else{
                
            }
        }

3.识别平台
目前三大主流平台Windows、Mac和Unix(包括各自Linux)。

        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,
                max:false,
                xll:false
            };
            //在此检测呈现引擎、平台和设备
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();

在确定平台时，检测navigator.platform要比检测用户代理字符串更简单。

        var p = navigator.platform;
        system.win = p.indeOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.xll - (p.indexOf("Xll") == 0) || (p.indeOf("Linux") == 0);

4.识别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.wub = "XP";
                            break;
                        case "6.0":
                        system.wub = "Vista";
                        break;
                        case "6.1":
                        system.wub = "7";
                        break;
                        default :
                        system.wub = "NT";
                        break;
                    }
                }else if(RegExp["$1"] == "9x"){
                    system.win = "ME";
                }else{
                    system.win = RegExp["$1"];
                }
            }
        }

        if (client.system.win) {
            if(client.system.win == "XP"){

            }else if(client.system.win == "Vista"){
                
            }
        }

5.识别移动设备

        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,
                max:false,
                xll:false,
                //移动设备
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false
            };
            //移动设备
            
            //在此检测呈现引擎、平台和设备
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();

        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);
            }

//检测Nokia
      
                system.nokiaN= ua.indexOf("NokiaN")>-1;

6.识别游戏系统

        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,
                max:false,
                xll:false,
                //移动设备
                iphone:false,
                ipod:false,
                ipad:false,
                ios:false,
                android:false,
                nokiaN:false,
                winMobile:false,
                //游戏系统
                wii:false,
                ps:false
            };
            
            //在此检测呈现引擎、平台和设备
            return {
                engine:engine,
                browser: browser,
                system: system
            };
        }();

相关文章

  • JavaScript高级程序设计笔记9

    客户端检测 能力检测 （1）更可靠的能力检测 （2）能力检测，不是浏览器检测 怪癖检测 用户代理检测 （1）用户代...

  • JavaScript客户端检测——用户代理检测

    用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为相应首部...

  • 客户端检测的含义和方法

    大纲 1、什么是客户端检测2、客户端检测的分类3、能力检测4、怪癖检测5、用户代理检测6、客户端检测方法的选择 1...

  • 客户端检测

    本文主要简单介绍客户端检测的三种方式：能力检测、怪癖检测、用户代理检测 能力检测 最常用、广泛的客户端检测形式 是...

  • JavaScript 编程：8.客户端检测

    客户端检测 用户代理字符串检测技术 client.js 文件：

  • javascript-用户代理检测

    用户代理检测指的是，检测用户代理字符串来确定用户实际使用的浏览器。在服务端，用户代理检测是一种常见且广为让人接受的...

  • 用户代理检测

    以下是完整的用户代理字符串检测脚本，包括检测呈现引擎、平台、Windows 操作系统、移动设备和游戏系统。

  • 9 客户端检测

    本章内容 使用能力检测 用户代理检测的历史 选择检测方式 9.1 能力检测 能力检测的基本模式如下： 举例子，IE...

  • 客户端检测之用户代理检测 — navigator.userAge

    前言 前端这东西，各种先有事实后有标准?。不管是各大浏览器老哥各自为政，还是w3c姗姗来迟，既有事实标准难以更改。...

  • JavaScript客户端检测——能力检测

    能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能力检测的基本模式 先检测达成目的的最常用的特性。必需测...

网友评论

      本文标题：JavaScript客户端检测——用户代理检测

      本文链接：https://www.haomeiwen.com/subject/owuifxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JavaScript客户端检测——用户代理检测|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！