javascript判断浏览器当前运行环境

认识浏览器

五大国际浏览器品牌：按照全球使用率排序

• Google Chrome：Windows、MacOS、Linux、Android、iOS
• Apple Safari：MacOS、iOS
• Mozilla Firefox：Windows、MacOS、Linux、Android、iOS
• ASA Opera：Windows、MacOS、Linux、Android、iOS
• Microsoft Internet Explorer或Microsoft Edge：Windows

国产常用浏览器品牌：按照国内使用率排序，大多基于开源项目Chromium进行开发

• 微信浏览器
• QQ浏览器
• UC浏览器
• 2345浏览器
• 搜狗浏览器
• 猎豹浏览器
• 遨游浏览器
• 百度浏览器：百度在2019年04月30日宣布停止服务
• 其他浏览器：很多很多，数不清，我就不列出来了

实现功能

• 判断用户浏览器使用系统和版本
• 判断用户浏览器是桌面端还是移动端，显示对应的主题样式
• 判断浏览器是Android端还是iOS端，跳转到对应的app下载链接
• 判断用户浏览器的内核和在台用于统计用户设备平台分布区间
• 判断用户浏览器的载体版本，用与提示更新信息

浏览器信息：按权重降序排序

• 浏览器系统：所运行的操作系统，包含Windows、MacOS、Linux、Android、iOS
• 浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端
• 浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident
• 浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
• 浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段

const testUa = regexp => regexp.test(ua);

获取UserAgent对应字段的版本

const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");

方案

按照权重(系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。

系统+系统版本

//系统
let system = "unknown";
if (testUa(/windows|win32|win64|wow32|wow64/ig)) {
    system = "windows"; //Windows系统
} else if (testUa(/macintosh|macintel/ig)) {
    system = "macos"; //Macos系统
} else if (testUa(/x11/ig)) {
    system = "linux"; //Linux系统
} else if (testUa(/android|adr/ig)) {
    system = "andriod"; //Android 系统
} else if (testUa(/ios|iphone|ipad|iwatch/ig)) {
    system = "ios"; // iOS系统
}
//系统版本
let systemVs = "unknown";
if (system ==="windows") { //windos版本
    if (testUa(/windos nt 5.0|windows 2000/ig)) {
        systemVs = "2000";
    } else if(testUa(/windows nt 5.1|windows xp/ig)){
        systemVs="xp";
    }else if(testUa(/windows nt 5.2|windows 2003/ig)){
        systemVs="2003";
    }else if(testUa(/windows nt 6.0|windows vista/ig)){
        systemVs="vista";
    }else if(testUa(/windows nt 6.1|windows 7/ig)){
        systemVs="7";
    }else if(testUa(/windows nt 6.2|windows 8/ig)){
        systemVs="8";
    }else if(testUa(/windows nt 6.3|windows 8.1/ig)){
        systemVs="8.1";
    }else if(testUa(/windows nt 10.0|windows 10/ig)){
        systemVs="10";
    }
}else if(system==="macos"){
    systemVs=testVs(/os x [\d._]+/ig);
}else if(system==="andriod"){
    systemVs=testVs(/andriod [\d._]+/ig);
}else if(system==="ios"){
    systemVs=testVs(/os [\d._]+/ig);
}

平台

//平台
let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {
    platform = "desktop"; //桌面端
} else if (system === "andriod" || system === "ios" || testUa(/mobile/ig)) {
    platform = "mobile"; //移动端
}

内核+载体

//内核+载体
let engine = "unknown";
let supporter = "unknown";
if (testUa(/applewebkit/ig) && testUa(/safsri/ig)) {
    engine = "webkit"; //webkit内核
    if (testUa(/edge/ig)) {
        supporter = "edge"; //Edge浏览器
    } else if (testUa(/opr/ig)) {
        supporter = "opr"; //Opera浏览器
    } else if (testUa(/chrome/ig)) {
        supporter = "chrome"; //Chrome浏览器
    } else {
        supporter = "safari"; //Safari浏览器
    }
} else if (testUa(/gecko/ig) && testUa(/firefox/ig)) {
    engine = "gecko"; //gecko内核
    supporter = "firefox"; //Firefox浏览器
} else if (testUa(/presto/ig)) {
    engine = "presto"; //presto 内核
    supporter = "opera"; //Opera 浏览器
} else if (testUa(/trident|compatible|msie/ig)) {
    engine = "trident"; //trident 内核
    supporter = "iexplore"; //IE 浏览器
}

内核版本+载体版本

//内核版本
let engineVs="unknown";
if(engine==="webkit"){
    engineVs=testVs(/applewebkit\/[\d.]+/ig);
}else if(engine==="gecko"){
    engineVs=testVs(/gecko\/[\d.]+/ig);
}else if(engine==="presto"){
    engineVs=testVs(/presto\/[\d.]+/ig);
}else if(engine==="trident"){
    engineVs=testVs(/trident\/[\d.]+/ig);
}
//载体版本
let supporterVs="unknown";
if(supporter==="chrome"){
    supporterVs=testVs(/chrome\/[\d.]+/ig)
}else if(supporter==="safari"){
    supporterVs = testVs(/verison\/[\d.]+/ig)
    }
    else if (supporter === "firefox") {
        supporterVs = testVs(/firefox\/[\d.]+/ig)
    } else if (supporter === "opera") {
        supporterVs = testVs(/opr\/[\d.]+/ig)
    } else if (supporter === "iexploer") {
        supporterVs = testVs(/(msie\/[\d.]+)|(rv:[\d.]+)/ig)
    } else if (supporter === "edge") {
        supporterVs = testVs(/edge\/[\d.]+/ig)
    }

外壳+外壳版本

//外壳+外壳版本
let shell="none";//外壳
let shellVs="unknown";
if(testUa(/micromessenger/ig)){
    shell="wechat"; //微信浏览器
    shellVs=testVs(/micromessenger\/[\d.]+/ig);
}else if(testUa(/qqbrowser/ig)){
    shell="qq";//QQ浏览器
    shellVs=testVs(/qqbrowser\/[\d.]+/ig);
} else if (testUa(/ubrowser/ig)) {
    shell = "uc"; //UC浏览器
    shellVs = testVs(/ubrowser\/[\d.]+/ig);
} else if (testUa(/2345explorer/ig)) {
    shell = "2345"; //2345浏览器
    shellVs = testVs(/2345explorer\/[\d.]+/ig);
} else if (testUa(/metasr/ig)) {
    shell = "sougou"; //搜狗浏览器
} else if (testUa(/lbbrowser/ig)) {
    shell = "liebao"; //猎豹浏览器
} else if (testUa(/maxthon/ig)) {
    shell = "maxthon"; //傲游浏览器
    shellVs = testVs(/maxthon\/[\d.]+/ig);
} else if (testUa(/bidubrowser/ig)) {
    shell = "baidu";
    shellVs = testVs(/bidubrowser [\d.]+/ig);
}

构造函数输出对象

将所有判断条件合并成一个对象输出，代码未优化。

• ystem：系统
• systemVs：系统版本
• platform：平台
• engine：内核
• engineVs：内核版本
• supporter：载体
• supporterVs：载体版本
• shell：外壳
• shellVs：外壳版本

function BrowserType() {
    const ua = navigator.userAgent.toLowerCase();
    const testUa = regexp => regexp.test(ua);
    const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
    // 接上以上if...else条件判断
    // ......
    // 获取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVs
    return Object.assign({
        engine, // webkit gecko presto trident
        engineVs,
        platform, // desktop mobile
        supporter, // chrome safari firefox opera iexplore edge
        supporterVs,
        system, // windows macos linux android ios
        systemVs
    }, shell === "none" ? {} : {
        shell, // wechat qq uc 2345 sougou liebao maxthon baidu
        shellVs
    });
}