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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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