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;
broName = '360极速浏览器-极速模式';
} 
}

//360兼容
if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) {
is360 = true;
broName = '360兼容模式';
}

//Chrome浏览器
if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf("Edge") < 0) {
isChrome = true;
/*broName = 'Chrome浏览器';*/
strStart = userAgent.indexOf('Chrome');
strStop = userAgent.indexOf(' Safari');
temp = userAgent.substring(strStart, strStop);
broName = temp.replace('/', '版本号');

}

document.getElementById('broType').value = broName;

}
</script>
</head>

<body onload="bro();">
<input type="text" id="broType" name="broType" style="width: 200px;">
<h4>JavaScript获取浏览器版本信息</h4>
</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> New Document </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta charset="utf-8" />
<meta name="Description" content="">

<script id=clientEventHandlersJS language=javascript>
/******************************************下为浏览器信息************************************************/
//获取浏览器相关信息
function allinfo() {
var appName = navigator.appName; //浏览器的正式名称
var appVersion = navigator.appVersion; //浏览器的版本号
var cookieEnabled = navigator.cookieEnabled; // 返回用户浏览器是否启用了cookie
var cpuClass = navigator.cpuClass; //返回用户计算机的cpu的型号,通常intel芯片返回"x86"(火狐没有)

var mimeType = navigator.mimeTypes; // 浏览器支持的所有MIME类型的数组
var platform = navigator.platform; // 浏览器正在运行的操作系统平台,包括Win16(windows3.x) 
// Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)
// 和MacPPC(Macintosh PowerPC)
var plugins = navigator.plugins; // 安装在浏览器上的所有插件的数组
var userLanguage = navigator.userLanguage; // 用户在自己的操作系统上设置的语言(火狐没有)
var userAgent = navigator.userAgent; //包含以下属性中所有或一部分的字符串:appCodeName,appName,appVersion,language,platform
var systemLanguage = navigator.systemLanguage; // 用户操作系统支持的默认语言(火狐没有)

//director

var appCodeName = navigator.appCodeName; //与浏览器相关的内部代码名
var appMinorVersion = navigator.appMinorVersion; //辅版本号(通常应用于浏览器的补丁或服务包)

var language = navigator.language; //浏览器支持的语言 (IE没有)

var onLine = navigator.onLine; //返回浏览器是否处于在线模式(IE4以上版本)

var opsProfile = navigator.opsProfile; // 未定义 (IE、火狐没有)

var oscpu = navigator.oscpu; //浏览器正在运行的操作系统,其中可能有CPU的信息(IE没有)

var product = navigator.product; // 浏览器的产品名(IE没有)

var productSub = navigator.productSub; //关于浏览器更多信息(IE没有)

var securityPolicy = navigator.securityPolicy; // 浏览器支持的加密类型(IE没有)

var userProfile = navigator.userProfile; // 返回一个UserProfile对象,它存储用户的个人信息(火狐没有)

var vender = navigator.vender; // 浏览器厂商名称(IE、火狐没有)

var vendorSub = navigator.vendorSub; // 关于浏览器厂商更多的信息

var webkitPersistentStorage = navigator.webkitPersistentStorage;

var info = "";var type ="";if(isIe()){
type ="IE浏览器";}elseif(isFireFox()){
type ="火狐浏览器";}
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";
info +="";//info += "";
info +="
IE特有属性:" + navigator.msManipulationViewsEnabled + "
浏览器类型:" + type + "
weizhi :" + webkitPersistentStorage + "
浏览器属性信息:" + userAgent + "
浏览器的正式名称:" + appName + "
浏览器的版本号:" + appVersion + "
浏览器相关的内部代码名:" + appCodeName + "
浏览器相关的辅代码号:" + appMinorVersion + "
浏览器支持的语言IE没有):" + language + "
浏览器是否处于在线模式:" + onLine + "
浏览器的产品名(IE没有):" + product + "
浏览器更多信息:" + productSub + "
浏览器厂商名称:" + vender + "
浏览器厂商更多信息:" + vendorSub + "
浏览器的是否启用了cookie:" + cookieEnabled + "
cpu等级:" + cpuClass + "
浏览器的MIME类型:" + mimeType.length + "
系统平台:" + platform + "
安装的插件:" + plugins + "
插件的数量:" + plugins.length + "
插件的名称:" + getPluginName() + "
用户设置的操作系统语言:" + userLanguage + "
操作系统支持的默认语言:" + systemLanguage + "
Director:" + checkePlugs("Director") + "
javaEnabled:" + navigator.javaEnabled() + "
是否有quickTime:" + checkePlugs("QuickTime") + "
flash插件情况:" + checkePlugs('Shockwave Flash') + "
是否有MediaPlayer:" + checkePlugs("MediaPlayer") + "
是否有realPlayer:" + checkePlugs("RealPlayer") + "
屏幕分辨率高度:" + window.screen.height + "
屏幕分辨率宽度:" + window.screen.width + "
颜色质量:" + window.screen.colorDepth + "位
像素:" + window.screen.deviceXDPI + "像素/英寸
字体是否平滑:" + window.screen.fontSmoothingEnabled + "
规定浏览器是否启用数据污点:" + navigator.taintEnabled() + "
"
; document.getElementById("elInfo").innerHTML = info; return info; } //获取插件所有的名称 function getPluginName() { var info = ""; var plugins = navigator.plugins; if (plugins.length > 0) { for (i = 0; i < navigator.plugins.length; i++) { info += navigator.plugins[i].name + ";"; } } return info; } //检查是否安装了某插件,如果安装了返回版本号 function checkePlugs(pluginname) { var f = "-" var plugins = navigator.plugins; if (plugins.length > 0) { for (i = 0; i < navigator.plugins.length; i++) { if (navigator.plugins[i].name.indexOf(pluginname) >= 0) { f = navigator.plugins[i].description.split(pluginname)[1]; return f; break; } } } return false; } //判断是否IE function isIe() { var i = navigator.userAgent.toLowerCase().indexOf("msie"); return i >= 0; } //判断是否firefox function isFireFox() { var i = navigator.userAgent.toLowerCase().indexOf("firefox"); return i >= 0; } /******************************************以上为浏览器信息,以下为pc信息************************************************/ var locator = new ActiveXObject("WbemScripting.SWbemLocator"); var service = locator.ConnectServer("."); function cpuInfo() { //CPU 信息 var properties = service.ExecQuery("SELECT * FROM Win32_Processor"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; info +=""; info +=""; info +=""; info +=""; info +=""; info +=""; info +="";} info +="
CPU 信息
CPU序列号:" + p.ProcessorID + "
" + p.Caption + "
CPU编号:" + p.DeviceID + "
CPU型号:" + p.Name + "
CPU状态:" + p.CpuStatus + "
CPU可用性:" + p.Availability + "
CUP Level:" + p.Level + "
主机名称:" + p.SystemName + "
Processor Type:" + p.ProcessorType + "
"
; return info; } function softDisk() { //软盘信息 var properties = service.ExecQuery("SELECT * FROM Win32_FloppyDrive"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; info +=""; info +="";} info +="
软盘信息
" + p.Description + "
" + p.DeviceID + "
" + p.Status + "
" + p.Manufacuturer + "
"
; return info; } function RomInfo() { //CD-ROM 信息 var properties = service.ExecQuery("SELECT * FROM Win32_CDROMDrive"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; info +=""; info +=""; info +="";} info +="
CD-ROM 信息
驱动器名称:" + p.Caption + "
描述:" + p.Description + "
盘符:" + p.Drive + "
驱动器状态:" + p.Status + "
是否在使用:" + p.MediaLoaded + "
"
; return info; } function keyBoardInfo() { //键盘信息 var properties = service.ExecQuery("SELECT * FROM Win32_Keyboard"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; info +="";} info +="
键盘信息
键盘描述:" + p.Description + "
键盘名称:" + p.Name + "
键盘状态:" + p.Status + "
"
; return info; } function mainBoard() { //主板信息 var properties = service.ExecQuery("SELECT * FROM Win32_BaseBoard"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; info +=""; info +=""; info +=""; info +="";} info +="
主板信息
主板ID:" + p.SerialNumber + "
" + p.HostingBoard + "
制造商:" + p.Manufacturer + "
是否开启:" + p.PoweredOn + "
型号:" + p.Product + "
版本:" + p.Version + "
"
; return info; } function disk() { //硬盘序列号 信息 var properties = service.ExecQuery("SELECT * FROM Win32_DiskDrive"); var e = new Enumerator(properties); var info = ""; info +="";for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +="";} info +="
硬盘信息
硬盘序列号:" + p.signature + "
"
; return info; } //获取Ram信息 function raminfo() { var system = new Enumerator(service.ExecQuery("SELECT * FROM Win32_ComputerSystem")).item(); var physicMenCap = Math.ceil(system.TotalPhysicalMemory / 1024 / 1024); //内存信息 var memory = new Enumerator(service.ExecQuery("SELECT * FROM Win32_PhysicalMemory")); for (var mem = [], i = 0; !memory.atEnd(); memory.moveNext()) { mem[i++] = { cap: memory.item().Capacity / 1024 / 1024, speed: memory.item().Speed }; } var info = ""; info +=""; info +=""; info +=""; info +="
内存信息
内存总量:" + (mem[0].cap + mem[1].cap) + "M
可用物理内存:" + physicMenCap + "M
"
; return info; } //获取网络连接信息 function ipinfo() { var properties = service.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration Where IPEnabled=TRUE"); var e = new Enumerator(properties); var info = ""; info +="";var i =1;for(;!e.atEnd(); e.moveNext()){var p = e.item(); info +=""; info +=""; i++;} info +="
网络连接信息:
MAC地址" + i + ":" + p.MACAddress + "
IP地址" + i + ":" + p.IPAddress(0) + "
"
; return info; } function pcInfo() { //所有信息 var info = cpuInfo(); info += disk(); info += raminfo(); info += mainBoard(); info += ipinfo(); info += keyBoardInfo(); info += RomInfo(); info += softDisk(); document.getElementById('elInfo').innerHTML = info; return info; } /******************************************以上为pc信息************************************************/ </script> </head> <body> <INPUT id="Button1" type="button" value="浏览器所有信息" name="Button1" language=javascript onclick="allinfo()"> <INPUT id="Button1" type="button" value="客户端pc信息" name="Button1" language=javascript onclick="pcInfo()"> <div id="elInfo"> </div> </body> </html>

你可能感兴趣的:(JavaScript日常处理)