js检测浏览器及系统信息【附送彩蛋~】
分类:javascript
作者:寒草
微信:hancao97
介绍:一个不一样的北漂程序员,欢迎加微信批评指正交流技术,或者一起约饭,玩耍,交个朋友~
背景
本文主要用于记录~
还有希望找到伙伴加我好友,加我微信吧,一起玩耍干饭
最近我们需要一个工具,可以检测客户在使用我们产品的时候的系统及浏览器环境。以便出现问题我们准确的进行复现调试。
按照需要,我主要做了以下几点:
- 浏览器版本信息
- 系统时间
- 系统版本
- 屏幕分辨率
- 浏览器缩放比例
- 网络连通性测试
针对浏览器:
- IE
- Chrome
- firefox
- Edge
下面我们开始逐一分享。
浏览器版本信息
获取用户使用的浏览器极其版本信息,支持:IE
,Chrome
,firefox
,Edge
输出格式: 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);
})()
哈哈哈,太土了~
结束语
最近比较忙,心也比较累(主要是心累),但是大家都是如此,也没啥可抱怨的。
(当然比较累也不是我最近没有写博客,这次文章质量还比较一般般的理由,我留了好多坑要去填,我会尽快找回学习状态,努力更新,葱呀)
希望大家辛苦工作的时候注意身体~
提前祝大家清明节假期快乐~
fighting~
最近有了旅行的打算,希望有共同想法却找不到玩伴的人加我微信,一起玩耍~
欸,单身狗好难,
微信:hancao97
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu