浏览器版本判断

2017-02-20

浏览器版本

大多搞后台/数据库开发的，每当你劝他们改干前端的时候，他们的理由必须包含“不喜欢前端开发各种浏览器的兼容问题，我们就一套代码。”有没有无言以对，这句戳中前端小伙伴们膝盖的话，道出了前端开发日常中最需要解决的问题，至少再完成浏览器大一统前，你只得这样做。

常见浏览器版本

浏览器版本其实不能按照厂家来分，因为最重要的是要看浏览器的内核，主要有那么几种：IE的Trident(IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）； 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）),早起版本与w3c有些脱节，某种意义上，IE10以下都需要考虑兼容；Gecko，Mozilla FireFox(火狐浏览器) 自家开发的内核，不过新推出的Brave,已经采用BLink/v8，不知道是不是要搞事情；Webkit(Safari内核,Chrome内核原型,开源)，目前safari和google自家安卓都在用，市场份额逐年提升，移动端和pc端的大佬。
当然，现阶段blink/v8（排版+脚本加载）双引擎是个趋势，好多浏览器已经开始选择了。
生在这个时代就要有这个时代的作为，判断浏览器版本，从而做到兼容是前端的一大责任，套用一句广告词，‘原来生活可以更美的’

pc端

js中非常重要的方法：window.navigator.userAgent，这个属性可以将浏览器信息返回，详细过程再代码中进行注释

function getBrowserInfo() {
    var oInfo = {};//Info:对象，存储浏览器信息
    var str = window.navigator.userAgent.toLowerCase();//str:userAgent获取相关信息
    //bReg:浏览器信息匹配正则,小正则1是浏览器类型，小正则2版本号
    var bReg = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
    var infoArr = str.match(bReg);
    oInfo.browser = infoArr[1].replace(/version/, "safari");//小正则1正确输出safari的处理
    oInfo.ver = infoArr[2];
    return oInfo;
}
var broInfo = getBrowserInfo();
console.log("浏览器："+broInfo.browser);
console.log(" 版本："+broInfo.ver);

上述运行结果，以上述运行结果，chrome 58.0.3000.4为例

1 2	浏览器：chrome 版本：58.0.3000.4

加上移动端

如果不只是判断兼容，甚至手机操作系统等信息，或者用于初步安全控制，可以将上述代码中添加更多信息，核心依然是 navigator,还未作进一步封装和优化。

var browser = {
    versions: ~function () {
        var broInfo = navigator.userAgent;
        return { //移动终端浏览器版本信息
            trident: broInfo.indexOf('Trident') > -1, //IE内核
            presto: broInfo.indexOf('Presto') > -1, //opera老版本内核
            webKit: broInfo.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: broInfo.indexOf('Gecko') > -1 && broInfo.indexOf('KHTML') == -1, //火狐内核
            mobile: !!broInfo.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!broInfo.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: broInfo.indexOf('Android') > -1 || broInfo.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: broInfo.indexOf('iPhone') > -1, //是否为iPhone
            iPad: broInfo.indexOf('iPad') > -1, //是否iPad
            webApp: broInfo.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
console.log("语言版本: " + browser.language);
console.log(" 是否为移动终端: " + browser.versions.mobile);
console.log(" ios终端: " + browser.versions.ios);
console.log(" android终端: " + browser.versions.android);
console.log(" 是否为iPhone: " + browser.versions.iPhone);
console.log(" 是否iPad: " + browser.versions.iPad);