JavaScript判断浏览器类型以及系统

现如今的浏览器众多,版本繁杂, 为了适应版本需要确定浏览器的类型,
尤其是360浏览器又分为安全浏览器和急速浏览器,特此封装一个可用的方法库,可在github上查看
GitHub

其中ie和chrome可查看version,并能区分360安全浏览器和急速浏览器

/**
 * 浏览器内核判断
 */
function getUserAgentInfoFoo() {
    var ua = {};
    var win = window;
    var nav = win.navigator;
    var doc = win.document;
    var ieAX = win.ActiveXObject;
    var ieMode = doc.documentMode;
    var REG_APPLE = /^Apple/;
    var ieVer = _getIeVersion() || ieMode || 0;
    var isIe = ieAX || ieMode;
    var regEdge = /Edge/i;
    var regChromeVersion = /(?:Chrome\/)(\d+)(?:\.)/i;
    var chromiumType = _getChromiumType();

    /**
     * 检测 external 是否包含该字段
     * @param reg 正则
     * @param type 检测类型,0为键,1为值
     * @returns {boolean}
     * @private
     */
    function _testExternal(reg, type) {
        var external = win.external || {};

        for (var i in external) {
            if (reg.test(type ? external[i] : i)) {
                return true;
            }
        }

        return false;
    }

    /**
     * 获取 Chromium 内核浏览器类型
     * @link http://www.adtchrome.com/js/help.js
     * @link https://ext.chrome.360.cn/webstore
     * @link https://ext.se.360.cn
     * @return {String}
     *         360ee 360极速浏览器
     *         360se 360安全浏览器
     *         sougou 搜狗浏览器
     *         liebao 猎豹浏览器
     *         chrome 谷歌浏览器
     *         ''    无法判断
     * @version 1.0
     * 2014年3月12日20:39:55
     */
    function _getChromiumType() {
        if (isIe || typeof win.scrollMaxX !== 'undefined' || REG_APPLE.test(nav.vendor || '')) {
            return '';
        }
        if (regEdge.test(navigator.userAgent)) {
            return 'Edge';
        }

        var _track = 'track' in document.createElement('track');//chrome下为true,ie下为false
        var webstoreKeysLength = win.chrome && win.chrome.webstore ? Object.keys(win.chrome.webstore).length : 0;
        var chromeAppKeysLength = win.chrome && win.chrome.app ? Object.keys(win.chrome.app).length : 0;//360se=6 360ee=5
        // 搜狗浏览器
        if (_testExternal(/^sogou/i, 0)) {
            return 'sogou';
        }

        // 猎豹浏览器
        if (_testExternal(/^liebao/i, 0)) {
            return 'liebao';
        }

        // chrome
        if (win.clientInformation && win.clientInformation.languages && win.clientInformation.languages.length > 2) {
            return 'chrome';
        }

        //注意此方法只能判断急速模式下的浏览器类型
        if (_track) {
            // 360极速浏览器|360安全浏览器
            // return webstoreKeysLength > 1 ? '360ee' : '360se';//截止20170405已经失效 此方法不能判断安全与急速
            // return chromeAppKeysLength > 5 ? '360ee' : '360se';//通过app下的keys个数判断
            return Object.keys(window.chrome.app).join().indexOf("getDetailsForFrame") > -1 ? '360ee' : '360se';//通过360se下有'getDetailsForFrame'特殊方法判断
        }

        return '';
    }

    // 获得ie浏览器版本
    function _getIeVersion() {
        var v = 3,
            p = document.createElement('p'),
            all = p.getElementsByTagName('i');

        while (
            p.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]);

        return v > 4 ? v : 0;
    }

    //获得chrome浏览器版本
    function _getChromeVersion() {
        var ua = navigator.userAgent;
        var v = regChromeVersion.exec(ua);
        return v[v.length - 1];
    }

    return {
        isIE: function () {
            return !!ieVer;
        },
        ieVersion: function () {
            return ieVer;
        },
        isEdge: function () {
            return chromiumType === 'Edge';
        },
        isChrome: function () {
            return chromiumType === 'chrome';
        },
        chromeVersion: function () {
            return _getChromeVersion();
        },
        is360se: function () {
            return chromiumType === '360se';
        },
        is360ee: function () {
            return chromiumType === '360ee';
        },
        isLiebao: function () {
            return chromiumType === 'liebao';
        },
        isSogou: function () {
            return chromiumType === 'sogou';
        },
        isQQ: function () {
            return chromiumType === 'qq';
        }
    }
}
function getUserAgentInfoToString() {
    var shell = getUserAgentInfoFoo();
    if (shell.isIE()) {
        return "IE:" + shell.ieVersion();
    }
    if (shell.isEdge()) {
        return 'Edge'
    }
    if (shell.isChrome()) {
        return 'chrome:' + shell.chromeVersion();
    }
    if (shell.is360se()) {
        return '360se'
    }
    if (shell.is360ee()) {
        return '360ee'
    }
    if (shell.isLiebao()) {
        return 'liebao'
    }
    if (shell.isSogou()) {
        return 'sogou'
    }
    if (shell.isQQ()) {
        return 'qq'
    }
    return ''
}

根据浏览器判断当前系统

 //判断系统
 let u = navigator.userAgent;
 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 if (isAndroid) {
 this.system = 'Android';
 } else if (isIOS) {
 this.system = 'IOS';
 } else {
 this.system = 'pc';
 }

另外在浏览器头部添加<meta>信息,可使360默认以急速模式打开.

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--指定ie用chrome内核渲染 需要安装GCF插件-->
    <meta name="renderer" content="webkit"><!--360浏览器默认webkit模式-->

参考:https://github.com/cloudcome/alien/blob/master/src/core/navigator/shell.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容

  • 太长了,还是转载吧...今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源...
    庞哈哈哈12138阅读 20,198评论 3 283
  • 最近《白夜追凶》火了,非常火! 在对国产剧向来严苛的豆瓣上面,依然是9.1的高分。 而比剧更火的,是剧里的潘粤明。...
    小艺酱阅读 797评论 0 1
  • 减少的是沙子, 增多的是皱纹。 存在与虚无妥协, 钟表统治着一切。 被钟表绑架, 搭上的是一生的赎金。 那么, 砸...
    俗然阅读 299评论 2 2
  • 实验三小赞 打竹板,笑开颜, 我们几人来台前, 来台前,道心声, 各位同学仔细听, 今天不把别的表, 专夸咱们新校...
    暑洪阅读 324评论 0 1