js获取浏览器信息及版本（兼容IE）
Posted 靳哲
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取浏览器信息及版本（兼容IE）相关的知识，希望对你有一定的参考价值。
获取浏览器信息方法有很多种，但是要是兼容ie旧版本就有点麻烦了，因为很多方法在旧版本ie是不支持的，所以ie我做了单独处理，但是目前还有小问题，就是想显示QQ浏览器，搜狗浏览器..这样的，这样还实现不了，因为他们用的别人的浏览器内核，没办法
代码：
<template>
<section class="p-10">
<h1> {{ browse }} </h1>
</section>
</template>
<script>
export default {
data() {
return {
browse: \'\'
};
},
methods: {
getBrowserInfo() {
let agent = navigator.userAgent.toLowerCase();
console.log(agent);
let arr = [];
let system = agent.split(\' \')[1].split(\' \')[0].split(\'(\')[1];
arr.push(system);
let REGSTR_EDGE = /edge\\/[\\d.]+/gi;
let REGSTR_IE = /trident\\/[\\d.]+/gi;
let OLD_IE = /msie\\s[\\d.]+/gi;
let REGSTR_FF = /firefox\\/[\\d.]+/gi;
let REGSTR_CHROME = /chrome\\/[\\d.]+/gi;
let REGSTR_SAF = /safari\\/[\\d.]+/gi;
let REGSTR_OPERA = /opr\\/[\\d.]+/gi;
// IE
if (agent.indexOf(\'trident\') > 0) {
arr.push(agent.match(REGSTR_IE)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_IE)[0].split(\'/\')[1]);
return arr;
}
// OLD_IE
if (agent.indexOf(\'msie\') > 0) {
arr.push(agent.match(OLD_IE)[0].split(\' \')[0]);
arr.push(agent.match(OLD_IE)[0].split(\' \')[1]);
return arr;
}
// Edge
if (agent.indexOf(\'edge\') > 0) {
arr.push(agent.match(REGSTR_EDGE)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_EDGE)[0].split(\'/\')[1]);
return arr;
}
// firefox
if (agent.indexOf(\'firefox\') > 0) {
arr.push(agent.match(REGSTR_FF)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_FF)[0].split(\'/\')[1]);
return arr;
}
// Opera
if (agent.indexOf(\'opr\') > 0) {
arr.push(agent.match(REGSTR_OPERA)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_OPERA)[0].split(\'/\')[1]);
return arr;
}
// Safari
if (agent.indexOf(\'safari\') > 0 && agent.indexOf(\'chrome\') < 0) {
arr.push(agent.match(REGSTR_SAF)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_SAF)[0].split(\'/\')[1]);
return arr;
}
// Chrome
if (agent.indexOf(\'chrome\') > 0) {
arr.push(agent.match(REGSTR_CHROME)[0].split(\'/\')[0]);
arr.push(agent.match(REGSTR_CHROME)[0].split(\'/\')[1]);
return arr;
} else {
arr.push(\'未获取到浏览器信息\');
return arr;
}
}
},
mounted() {
let browserInfo = this.getBrowserInfo();
if (browserInfo[1] && browserInfo[2]) {
this.browse = this.getBrowserInfo()[1] + \' \' + this.getBrowserInfo()[2];
} else {
this.browse = \'未获取到浏览器信息\';
}
switch (this.browse) {
case \'msie 6.0\':
this.browse = \'Internet Explorer 6\';
break;
case \'msie 7.0\':
this.browse = \'Internet Explorer 7\';
break;
case \'trident 4.0\':
this.browse = \'Internet Explorer 8\';
break;
case \'trident 5.0\':
this.browse = \'Internet Explorer 9\';
break;
case \'trident 6.0\':
this.browse = \'Internet Explorer 10\';
break;
case \'trident 7.0\':
this.browse = \'Internet Explorer 11\';
break;
}
}
}
</script>
<style lang="scss">
</style>
以下是参考资料：https://www.cnblogs.com/muscleape/p/6897356.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base>
<meta charset="utf-8">
<title>JS获取浏览器类型和版本信息</title>
<script>
function bro() {
var is360 = false;
var isIE = false;
var isFirefox = false;
var isChrome = false;
var isEdge = false;
var broName = \'Runing\';
var str = \'\';
var strStart = 0;
var strStop = 0;
var arr = new Array();
var temp = \'\';
var userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform
/*alert(userAgent);*/
//FireFox
if (userAgent.indexOf(\'Firefox\') != -1) {
isFireFox = true;
/*broName = \'FireFox浏览器\';*/
strStart = userAgent.indexOf(\'Firefox\');
temp = userAgent.substring(strStart);
broName = temp.replace(\'/\', \'版本号\')
}
//Edge
if (userAgent.indexOf(\'Edge\') != -1) {
isEdge = true;
/*broName = \'Edge浏览器\';*/
strStart = userAgent.indexOf(\'Edge\');
temp = userAgent.substring(strStart);
broName = temp.replace(\'/\', \'版本号\');
}
//IE浏览器
if (userAgent.indexOf(\'NET\') != -1 && userAgent.indexOf("rv") != -1) {
isIE = true;
/*broName = \'IE浏览器\'; */
strStart = userAgent.indexOf(\'rv\');
strStop = userAgent.indexOf(\')\');
temp = userAgent.substring(strStart, strStop);
broName = temp.replace(\'rv\', \'IE\').replace(\':\', \'版本号\');
}
//360极速模式可以区分360安全浏览器和360极速浏览器
if (userAgent.indexOf(\'WOW\') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) {
if(navigator.javaEnabled()){
is360 = true;
broName = \'360安全浏览器-极速模式\';
}else{
is360 = true十条jQuery代码片段助力Web开发效率提升