js检测浏览器及系统信息【附送彩蛋~】

吐槽君 分类:javascript

image.png

作者:寒草
微信:hancao97
介绍:一个不一样的北漂程序员,欢迎加微信批评指正交流技术,或者一起约饭,玩耍,交个朋友~

背景

本文主要用于记录~
还有希望找到伙伴加我好友,加我微信吧,一起玩耍干饭

最近我们需要一个工具,可以检测客户在使用我们产品的时候的系统及浏览器环境。以便出现问题我们准确的进行复现调试。
按照需要,我主要做了以下几点:

  • 浏览器版本信息
  • 系统时间
  • 系统版本
  • 屏幕分辨率
  • 浏览器缩放比例
  • 网络连通性测试

针对浏览器:

  • IE
  • Chrome
  • firefox
  • Edge

下面我们开始逐一分享。

浏览器版本信息

获取用户使用的浏览器极其版本信息,支持:IEChromefirefoxEdge
输出格式: Chrome版本号89.0.4389.90

function getBrowserInfo() {
    var strStart = 0;
    var strStop = 0;
    var temp = '';
    var broInfo = '';
    console.log(window.navigator);
    var userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串:appCodeName,appName,appVersion,language,platform
    //FireFox
    if (userAgent.indexOf('Firefox') != -1) {
        strStart = userAgent.indexOf('Firefox');
        temp = userAgent.substring(strStart);
        broInfo = temp.replace('/', '版本号')
    }
    //Edge
    if (userAgent.indexOf('Edge') != -1) {
        strStart = userAgent.indexOf('Edge');
        temp = userAgent.substring(strStart);
        broInfo = temp.replace('/', '版本号');
    }
    //IE浏览器
    if (userAgent.indexOf('NET') != -1 && userAgent.indexOf("rv") != -1) {
        strStart = userAgent.indexOf('rv');
        strStop = userAgent.indexOf(')');
        temp = userAgent.substring(strStart, strStop);
        broInfo = temp.replace('rv', 'IE').replace(':', '版本号');
    }
    //Chrome浏览器
    if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf("Edge") < 0 && userAgent.indexOf('Chrome') != -1) {
        strStart = userAgent.indexOf('Chrome');
        strStop = userAgent.indexOf(' Safari');
        temp = userAgent.substring(strStart, strStop);
        broInfo = temp.replace('/', '版本号');
    }
    return broInfo;
}
 

系统时间

这个就感觉是个凑数功能了~

function setSystemTime() {
    var date = new Date();
    document.getElementById('systemTime').innerHTML = date.toLocaleString();
}
 

系统版本

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

浏览器缩放比例

function getScaling(){
    var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
    }
    else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
    }
    return ratio.toFixed(2);
}
 

屏幕分辨率

这里IE有一点奇葩,需要单独处理,因为他的 screen.width和screen.height属性会根据缩放比例变化~

function getScreenDist(){
    if (getBrowserInfo().indexOf('IE') === -1) {
        return screen.width + '*' + screen.height; 
    }else{
        //IE单独处理
        const scale = getScaling();
        return Math.round(screen.width*scale) + '*' + Math.round(screen.height*scale);
    }
}
 

网络连通性测试

因为同源策略,这里我使用了jquery的jsonp进行实现~

function testUrl() {
    var url;
    var img;
    var iframe;
    document.getElementById('row_confirm').addEventListener('click', function () {
        url = document.getElementsByClassName('row_input')[0].value;
        if (!url) {
            alert('请输入url');
            return;
        }
        $.ajax({
            type: 'get',
            cache: false,
            url: url,
            dataType: "jsonp", //跨域采用jsonp方式 
            processData: false,
            timeout:10000, 
            complete: function (data) {
                if (data.status==200) {
                    alert('网络联通!')
                } else {
                    alert('该网络不连通!'+data.status)
                }

            }
        });
    })
}
 

彩蛋

祝掘金的伙伴们2020天天开心~
诶呀我真的是个幼稚鬼...
欢迎大家来加我微信和我做朋友哦~

(function(){
  const PRIMARY_PROPERTY = '开心~';
  const endDate = new Date("2021/12/31");
  let startDate = new Date("2021/1/1");
  let resStr = '';
  while(startDate <= endDate){
    resStr += `${startDate.toLocaleString().replace(/[\u4e00-\u9fa5][\x00-\xff]*/g,'')} 掘金的伙伴们 ${PRIMARY_PROPERTY} \n`;
    startDate = new Date(startDate.setDate(startDate.getDate()+1));
  }
  console.log(resStr);
})()
 

image.png
哈哈哈,太土了~

结束语

最近比较忙,心也比较累(主要是心累),但是大家都是如此,也没啥可抱怨的。
(当然比较累也不是我最近没有写博客,这次文章质量还比较一般般的理由,我留了好多坑要去填,我会尽快找回学习状态,努力更新,葱呀)
希望大家辛苦工作的时候注意身体~
提前祝大家清明节假期快乐~
fighting~

image.png

最近有了旅行的打算,希望有共同想法却找不到玩伴的人加我微信,一起玩耍~
欸,单身狗好难,
微信:hancao97

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容