js判断浏览器类型和版本

时间:2022-09-18 16:54:24

原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html

除了另无它法,肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期,Netscape占绝对统计地位,大部分人们不愿意兼容其他浏览器,并通过检测其UA让他们的网站只允许Netscape访问,这就逼使其他浏览器(包括IE)修改自己的UA伪装成Netscape来通过那些自以为是的脚本,于是出现每个人都声称自己是别人的局面,即使最新的IE9的UA也是:

//Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

下面我收集或独创的一些判定:

//IE8 新特征一览: http://www.cnblogs.com/rubylouvre/articles/1716755.html
//2010 4 16日更新
        ie678 = !+"\v1" ;
        ie678 = !-[1,];//IE9预览版中失效
        ie678 ='\v'=='v' ;
        ie678 = ('a~b'.split(/(~)/))[1] == "b"
        ie678 = 0.9.toFixed(0) == "0"
        IE8 = window.toStaticHTML
        IE9 = window.msPerformance
        IE6-10 = !!document.createStyleSheet
        ie = !!document.recalc
        ie = !!window.VBArray
        ie = !!window.ActiveXObject
        ie678 = 0//@cc_on+1;
        ie = !!window.createPopup;
        ie = /*@cc_on!@*/!1;
        ie = document.expando;//document.all在opera firefox的古老版本也存在
        ie = /\w/.test('\u0130') //由群里的abcd友情提供
        
        ie6 = !"1"[0] //利用IE6或IE5的字符串不能使用数组下标的特征
        ie8 = !!window.XDomainRequest;
        ie9 =  document.documentMode && document.documentMode === 9;
        //自创,基于条件编译的嗅探脚本,IE会返回其JS引擎的版本号,非IE返回0
        var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1
        ie9 = ieVersion === 5.9
        ie8 = ieVersion === 5.8
        ie7 = ieVersion === 5.7
        ie6 = ieVersion === 5.6
        ie5 = ieVersion === 5.5
        isIE11 =navigator.userAgent.indexOf("re:11")>0
        //https://developer.mozilla.org/En/Windows_Media_in_Netscape
        netscape = !!window.GeckoActiveXObject
        gecko  = !!window.netscape //包括firefox
        firefox = !!window.Components
        firefox = !!window.updateCommands
        firefox = !!window.sidebar
        safari = !!(navigator.vendor && navigator.vendor.match(/Apple/))
        safari = window.openDatabase && !window.chrome;
        chrome= !!(window.chrome && window.google)
        opera=!!window.opera ;
        wpIE = 'msmaxtouchpoints' in window.navigator //判定当前是否在IE的移动版中
        //傲游2 3
        maxthon = /maxthon/i.test(navigator.userAgent)
        //360安全浏览器
        is360se = /360se/i.test(navigator.userAgent)
//2010.6.4
       setTimeout(function(){//FF的setTimeout总是有一个额余的参数0
          var isFF = !!arguments.length;
          alert(isFF)
        }, 0);
//判定IE版本
2010.10.1
      ie = (function(undefined){
        var v = 3, div = document.createElement('div');
        while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]);
        return v> 4 ? v : undefined;
      }());
//判定IE版本 2011.2.24 IE 条件注释在
       ie = (function() {
          var v = 3, div = document.createElement('div');
          while (div.innerHTML = '<!--[if gt IE '+(++v)+']>1<![endif]-->', div.innerHTML);
          return v > 4 ? v : !v;
        }());
//手机的相关判定 2011.9.21
 isIPhone = /iPhone/i.test(navigator.userAgent);
 isIPhone4 = window.devicePixelRatio >= 2
//在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5
//http://blog.webcreativepark.net/2011/01/25-173502.html
var ua =  navigator.userAgent;
isAndroid = /Android/i.test(ua);
isBlackBerry = /BlackBerry/i.test(ua)
isWindowPhone = /IEMobile/i.test(ua)
isIOS = /iPhone|iPad|iPod/i.test(ua)
isMobile = isAndroid || isBlackBerry || isWindowPhone || isIOS
 
if(window.external+"" == "undefined" || window.external == undefined)
        {
            //网站不能识别你的浏览器 不支持window.external 很可能为360浏览器
            browseInfo.extend   = "360SE";
            browseInfo.name     = "360浏览器";
        }
var pf = (navigator.platform || "").toLowerCase(),
        ua = navigator.userAgent.toLowerCase(),
        s;
function toFixedVersion(ver, floatLength) {
    ver = ("" + ver).replace(/_/g, ".");
    floatLength = floatLength || 1;
    ver = String(ver).split(".");
    ver = ver[0] + "." + (ver[1] || "0");
    ver = Number(ver).toFixed(floatLength);
    return ver;
}
 
function updateProperty(target, name, ver) {
    target = QApp[target]
    target.name = name;
    target.version = ver;
    target[name] = ver;
}
// 提供三个对象,每个对象都有name, version(version必然为字符串)
// 取得用户操作系统名字与版本号,如果是0表示不是此操作系统
var platform = QApp.platform = {
    name: (window.orientation != undefined) ? 'iPod' : (pf.match(/mac|win|linux/i) || ['unknown'])[0],
    version: 0,
    iPod: 0,
    iPad: 0,
    iPhone: 0,
    android: 0,
    win: 0,
    linux: 0,
    mac: 0
};
 
(s = ua.match(/windows ([\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) :
        (s = ua.match(/windows nt ([\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) :
        (s = ua.match(/linux ([\d.]+)/)) ? updateProperty("platform", "linux", toFixedVersion(s[1])) :
        (s = ua.match(/mac ([\d.]+)/)) ? updateProperty("platform", "mac", toFixedVersion(s[1])) :
        (s = ua.match(/ipod ([\d.]+)/)) ? updateProperty("platform", "iPod", toFixedVersion(s[1])) :
        (s = ua.match(/ipad[\D]*os ([\d_]+)/)) ? updateProperty("platform", "iPad", toFixedVersion(s[1])) :
        (s = ua.match(/iphone ([\d.]+)/)) ? updateProperty("platform", "iPhone", toFixedVersion(s[1])) :
        (s = ua.match(/android ([\d.]+)/)) ? updateProperty("platform", "android", toFixedVersion(s[1])) : 0;
//============================================
//取得用户的浏览器名与版本,如果是0表示不是此浏览器
var browser = QApp.browser = {
    name: "unknown",
    version: 0,
    ie: 0,
    firefox: 0,
    chrome: 0,
    opera: 0,
    safari: 0,
    mobileSafari: 0,
    adobeAir: 0 //adobe 的air内嵌浏览器
};
 
(s = ua.match(/trident.*; rv\:([\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) : //IE11的UA改变了没有MSIE
        (s = ua.match(/msie ([\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) :
        (s = ua.match(/firefox\/([\d.]+)/)) ? updateProperty("browser", "firefox", toFixedVersion(s[1])) :
        (s = ua.match(/chrome\/([\d.]+)/)) ? updateProperty("browser", "chrome", toFixedVersion(s[1])) :
        (s = ua.match(/opera.([\d.]+)/)) ? updateProperty("browser", "opera", toFixedVersion(s[1])) :
        (s = ua.match(/adobeair\/([\d.]+)/)) ? updateProperty("browser", "adobeAir", toFixedVersion(s[1])) :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? updateProperty("browser", "safari", toFixedVersion(s[1])) : 0;
 
//下面是各种微调
//mobile safari 判断,可与safari字段并存
(s = ua.match(/version\/([\d.]+).*mobile.*safari/)) ? updateProperty("browser", "mobileSafari", toFixedVersion(s[1])) : 0;
 
if (platform.iPad) {
    updateProperty("browser", 'mobileSafari', '0.0');
}
 
if (browser.ie) {
    if (!document.documentMode) {
        document.documentMode = Math.floor(browser.ie)
        //http://msdn.microsoft.com/zh-cn/library/cc817574.aspx
        //IE下可以通过设置 <meta http-equiv="X-UA-Compatible" content="IE=8">改变渲染模式
        //一切以实际渲染效果为准
    } else if (document.documentMode !== Math.floor(browser.ie)) {
        updateProperty("browser", "ie", toFixedVersion(document.documentMode))
    }
}
//============================================
//取得用户浏览器的渲染引擎名与版本,如果是0表示不是此浏览器
QApp.engine = {
    name: 'unknown',
    version: 0,
    trident: 0,
    gecko: 0,
    webkit: 0,
    presto: 0
};
 
(s = ua.match(/trident\/([\d.]+)/)) ? updateProperty("engine", "trident", toFixedVersion(s[1])) :
        (s = ua.match(/gecko\/([\d.]+)/)) ? updateProperty("engine", "gecko", toFixedVersion(s[1])) :
        (s = ua.match(/applewebkit\/([\d.]+)/)) ? updateProperty("engine", "webkit", toFixedVersion(s[1])) :
        (s = ua.match(/presto\/([\d.]+)/)) ? updateProperty("engine", "presto", toFixedVersion(s[1])) : 0;
 
if (QApp.browser.ie) {
    if (QApp.browser.ie == 6) {
        updateProperty("engine", "trident", toFixedVersion("4"));
    } else if (browser.ie == 7 || browser.ie == 8) {
        updateProperty("engine", "trident", toFixedVersion("5"));
    }
}
//by 司徒正美
//thanks to
//https://github.com/kissyteam/kissy/blob/master/src/ua/src/ua.js
//https://github.com/AlloyTeam/JX/blob/master/src/jx.browser.js
//判定浏览器是否支持某些重要特性
require("avalon")
QApp.support = {
    //判定是否支持CSS3的transition, animation,支持返回可用的属性名,不支持返回null
    //https://github.com/jquery/jquery-mobile/blob/master/js/animationComplete.js
    cssTransition: avalon.cssName("transition"),
    cssAnimation: avalon.cssName("animation"),
    cssAnimation3D: transform3dTest(),
    //判定是否支持伪元素
    cssPseudoElement: !!avalon.cssName("content"),
    //现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。
    //使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为
    cssPointerEvents: cssPointerEventsTest(),
    boxShadow: !!avalon.cssName("boxShadow"),
    //http://*.com/questions/15906508/chrome-browser-for-android-no-longer-supports-webkit-overflow-scrolling-is-the
    touchOverflow: !!avalon.cssName("overflow-scrolling"),
    //要弄明media query,先要了解一下media type,其实这个大家会比较熟悉一点,
    //我们通常会用到的media type会是all 和screen,然后是print,
    //一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
    //media type的浏览器支持
    //* IE5.5/6/7不支持在@import中使用媒体类型
    //* Safari/firefox只支持all,screen,print三种类型(包括iphone)
    //* Opera 完全支持
    //* Opera mini  支持handheld,未指定则使用screen
    //* Windows Mobile系统中的IE支持handheld,其它支持不明…
    //media query是CSS 3对media type的增强,事实上我们可以将media query看成是media type+css属性判断。
    //     @media screen and (min-width:1024px) and (max-width:1280px){
    //          body{font-size:medium;}
    //     }
    //详见 http://www.qianduan.net/media-type-and-media-query.html
    mediaquery: mediaTest("only all"),
    //https://github.com/jquery/jquery-mobile/blob/master/js/support/touch.js
    touch: "ontouchend" in document,
    //HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。
    //这些方法可以协同window.onpopstate事件一起工作。
    //https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
    pushState: "pushState" in history &&
            "replaceState" in history &&
            // When running inside a FF iframe, calling replaceState causes an error
            !(window.navigator.userAgent.indexOf("Firefox") >= 0 && window.top !== window) &&
            (window.navigator.userAgent.search(/CriOS/) === -1),
    boundingRect: typeof document.documentElement.getBoundingClientRect !== "undefined",
    orientation: "orientation" in window && "onorientationchange" in window,
    fixedPosition: true, //下面会修正
    //http://*.com/questions/5539354/svg-for-images-in-browsers-with-png-fallback
    inlineSVG:!! (window.SVGAngle && document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") )
 
}
 
 
 
var matchMedia = window.matchMedia || (function(doc, undefined) {
    var bool,
            docElem = doc.documentElement,
            refNode = docElem.firstElementChild || docElem.firstChild,
            // fakeBody required for <ff4 when="" executed="" in="" <head="">
            fakeBody = doc.createElement("body"),
            div = doc.createElement("div");
 
    div.id = "mq-test-1";
    div.style.cssText = "position:absolute;top:-100em";
    fakeBody.style.background = "none";
    fakeBody.appendChild(div);
 
    return function(q) {
 
        div.innerHTML = "­<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
 
        docElem.insertBefore(fakeBody, refNode);
        bool = div.offsetWidth === 42;
        docElem.removeChild(fakeBody);
 
        return {
            matches: bool,
            media: q
        };
 
    };
 
}(document));
 
var mediaTest = function(q) {
    return matchMedia(q).matches;
};
 
function cssPointerEventsTest() {
    var element = document.createElement("x"),
            documentElement = document.documentElement,
            getComputedStyle = window.getComputedStyle,
            supports;
 
    if (!("pointerEvents" in element.style)) {
        return false;
    }
 
    element.style.pointerEvents = "auto";
    element.style.pointerEvents = "x";
    documentElement.appendChild(element);
    supports = getComputedStyle &&
            getComputedStyle(element, "").pointerEvents === "auto";
    documentElement.removeChild(element);
    return !!supports;
}
 
//http://*.com/questions/5661671/detecting-transform-translate3d-support
function transform3dTest() {
    var mqProp = "transform-3d",
            // Because the `translate3d` test below throws false positives in Android:
            ret = mediaTest("(-" + vendors.join("-" + mqProp + "),(-") + "-" + mqProp + "),(" + mqProp + ")"),
            el, transforms, t;
 
    if (ret) {
        return !!ret;
    }
 
    el = document.createElement("div");
    transforms = {
        // We’re omitting Opera for the time being; MS uses unprefixed.
        "MozTransform": "-moz-transform",
        "transform": "transform"
    };
 
    fakeBody.append(el);
 
    for (t in transforms) {
        if (el.style[ t ] !== undefined) {
            el.style[ t ] = "translate3d( 100px, 1px, 1px )";
            ret = window.getComputedStyle(el).getPropertyValue(transforms[ t ]);
        }
    }
    return (!!ret && ret !== "none");
}
 
//判定当前浏览器是否支持position:fiexed
new function() {
    var test = document.createElement('div'),
            control = test.cloneNode(false),
            fake = false,
            root = document.body || (function() {
                fake = true;
                return document.documentElement.appendChild(document.createElement('body'));
            }());
 
    var oldCssText = root.style.cssText;
    root.style.cssText = 'padding:0;margin:0';
    test.style.cssText = 'position:fixed;top:42px';
    root.appendChild(test);
    root.appendChild(control);
 
    QApp.support.positionfixed = test.offsetTop !== control.offsetTop;
 
    root.removeChild(test);
    root.removeChild(control);
    root.style.cssText = oldCssText;
 
    if (fake) {
        document.documentElement.removeChild(root);
    }
}
new function() {
    var test = document.createElement('div'),
            ret, fake = false,
            root = document.body || (function() {
                fake = true;
                return document.documentElement.appendChild(document.createElement('body'));
            }());
 
    if (typeof document.body.scrollIntoViewIfNeeded === 'function') {
 
        var oldCssText = root.style.cssText,
                testScrollTop = 20,
                originalScrollTop = window.pageYOffset;
 
        root.appendChild(test);
 
        test.style.cssText = 'position:fixed;top:0px;height:10px;';
 
        root.style.height = "3000px";
 
        /* avoided hoisting for clarity */
        var testScroll = function() {
            if (ret === undefined) {
                test.scrollIntoViewIfNeeded();
                if (window.pageYOffset === testScrollTop) {
                    ret = true;
                } else {
                    ret = false;
                }
            }
            window.removeEventListener('scroll', testScroll, false);
        }
 
        window.addEventListener('scroll', testScrollTop, false);
        window.setTimeout(testScroll, 20); // ios 4 does'nt publish the scroll event on scrollto
        window.scrollTo(0, testScrollTop);
        testScroll();
 
        root.removeChild(test);
        root.style.cssText = oldCssText;
        window.scrollTo(0, originalScrollTop);
 
    } else {
        ret = QApp.support.positionfixed; // firefox and IE doesnt have document.body.scrollIntoViewIfNeeded, so we test with the original modernizr test
    }
 
    if (fake) {
        document.documentElement.removeChild(root);
    }
 
    QApp.support.iospositionfixed = ret;
}
</ff4>

js判断浏览器类型和版本的更多相关文章

  1. JS判断浏览器类型及版本

    浏览器 ie firefox opera safari chrome 分类: 一路辛酸---JavaScript 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, S ...

  2. js判断浏览器类型以及版本

    你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的 ...

  3. JS判断浏览器类型与版本

    在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同的浏 ...

  4. js 判断浏览器类型及版本

    1.思路: 能力检测 + 字符串检索 2.例子 IE    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)      ActiveXObject函 ...

  5. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  6. JS判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  7. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  8. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  9. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

随机推荐

  1. 【Java并发编程实战】-----synchronized

    在我们的实际应用当中可能经常会遇到这样一个场景:多个线程读或者.写相同的数据,访问相同的文件等等.对于这种情况如果我们不加以控制,是非常容易导致错误的.在java中,为了解决这个问题,引入临界区概念. ...

  2. 模拟n步一维随机游走的情况。

    package randomWalk; import java.util.Random; import java.util.Scanner; public class RandomWalk { pub ...

  3. SQL语句修改表

    -- 更改字段类型 默认值 alter table 表名 alter column 字段名 类型 ALTER TABLE 表名 add DEFAULT ('修改后的默认值') for 字段名 WITH ...

  4. sql server 系统表系统视图 及作用说明

    sql server 系统视图,可分为: 目录视图   兼容性视图    动态管理视图和函数    信息架构视图    复制视图 系统表: sysaltfiles主数据库 保存数据库的文件 sysch ...

  5. Myeclipse中如何修改Tomcat的端口号

    一,使用 Myeclipse 中自带的 tomcat 右键 configure 弹出窗口 在 port Number 中修改 端口号即可: 二,配置的 tomcat 如果用上述的方法,只能打开这样的窗 ...

  6. log4j日志输出配置

    # Configure logging for testing: optionally with log filelog4j.rootLogger=WARN, stdoutlog4j.rootLogg ...

  7. UE4中创建第一、第三人称角色,并进行角色间的切换

    在游戏中经常会出现第一人称和第三人称的视角切换场景,笔者在这里简单介绍如何进行这步操作. 1.创建角色 在内容浏览器中添加2个Character蓝图,分别命名为FirstPersonalCharact ...

  8. WPS 表格筛选两列相同数据-完美-2017年11月1日更新

    应用: 1.选出A列中的数据是否在B列中出现过: 2.筛选出某一批序号在一个表格里面的位置(整批找出) 3.其实还有其他很多应用,难描述出来... ... A列中有几百的名字,本人想帅选出B列中的名字 ...

  9. JavaScript学习 - 基础&lpar;八&rpar; - DOM 节点 添加&sol;删除&sol;修改&sol;属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  10. Java 中的队列 Queue

    一.队列的定义 我们都知道队列(Queue)是一种先进先出(FIFO)的数据结构,Java中定义了java.util.Queue接口用来表示队列.Java中的Queue与List.Set属于同一个级别 ...