原生js判断操作系统和浏览器版本

无道 2019-07-20 0 条评论 前端相关 阅读428 手机阅读

背景

在诸如博客、论坛等系统的评论中,我们可以看见不少的网站都有显示发表评论的人的操作系统版本和浏览器版本。

实现

这里我们使用纯js方法来实现获取这两者的方法。

实现原理很简单

浏览器都会带一个User-Agent的header信息,此信息中就携带一些操作系统和浏览器的版本,我们只需添加一些正则或者一些方法来匹配即可。

获取操作系统版本

function getOS() {
    let sUserAgent = navigator.userAgent;
    let isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    let isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
    if (isMac) return "Mac";
    let isUnix = (navigator.platform == "X11") && !isWin && !isMac;
    if (isUnix) return "Unix";
    let isLinux = (String(navigator.platform).indexOf("Linux") > -1);
    if (isLinux) return "Linux";
    if (isWin) {
        let isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
        if (isWin2K) return "Win2000";
        let isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
        if (isWinXP) return "WinXP";
        let isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
        if (isWin2003) return "Win2003";
        let isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
        if (isWinVista) return "WinVista";
        let isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
        if (isWin7) return "Win7";
        let isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
        if (isWin10) return "Win10";
    }
    return "other";
}

获取浏览器

function getBrowse() {
    let browser = {};
    let userAgent = navigator.userAgent.toLowerCase();
    let s;
    (s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;
    let version = "";
    if (browser.ie) {
        version = 'IE ' + browser.ie;
    }
    else {
        if (browser.firefox) {
            version = 'Firefox';
            // version = 'firefox ' + browser.firefox;
        }
        else {
            if (browser.chrome) {
                version = 'Chrome';
                // version = 'chrome ' + browser.chrome;
            }
            else {
                if (browser.opera) {
                    version = 'Opera';
                    // version = 'opera ' + browser.opera;
                }
                else {
                    if (browser.safari) {
                        version = 'Safari';
                        // version = 'safari ' + browser.safari;
                    }
                    else {
                        version = '未知浏览器';
                    }
                }
            }
        }
    }
    return version;
}

效果

原生js获取浏览器版本和操作系统版本

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-07-20 12:49
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~