js获取浏览器信息及版本（兼容IE）

时间：2020-12-08 19:21:46

　　获取浏览器信息方法有很多种，但是要是兼容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)

// 和ＭacPPC(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 = "<table border=1>";

var type = "";

if (isIe()) {

type = "IE浏览器";

} else if (isFireFox()) {

type = "火狐浏览器";

}

info += "<tr><td>IE特有属性：</td><td>" + navigator.msManipulationViewsEnabled + "</td></tr>";

info += "<tr><td>浏览器类型：</td><td>" + type + "</td></tr>";

info += "<tr><td>weizhi ：</td><td>" + webkitPersistentStorage + "</td></tr>";

info += "<tr><td>浏览器属性信息：</td><td>" + userAgent + "</td></tr>";

info += "<tr><td>浏览器的正式名称：</td><td>" + appName + "</td></tr>";

info += "<tr><td>浏览器的版本号：</td><td>" + appVersion + "</td></tr>";

info += "<tr><td>浏览器相关的内部代码名：</td><td>" + appCodeName + "</td></tr>";

info += "<tr><td>浏览器相关的辅代码号：</td><td>" + appMinorVersion + "</td></tr>";

info += "<tr><td>浏览器支持的语言IE没有）：</td><td>" + language + "</td></tr>";

info += "<tr><td>浏览器是否处于在线模式：</td><td>" + onLine + "</td></tr>";

info += "<tr><td>浏览器的产品名（IE没有）：</td><td>" + product + "</td></tr>";

info += "<tr><td>浏览器更多信息：</td><td>" + productSub + "</td></tr>";

info += "<tr><td>浏览器厂商名称：</td><td>" + vender + "</td></tr>";

info += "<tr><td>浏览器厂商更多信息：</td><td>" + vendorSub + "</td></tr>";

info += "<tr><td>浏览器的是否启用了cookie：</td><td>" + cookieEnabled + "</td></tr>";

info += "<tr><td>cpu等级：</td><td>" + cpuClass + "</td></tr>";

info += "<tr><td>浏览器的MIME类型：</td><td>" + mimeType.length + "</td></tr>";

info += "<tr><td>系统平台：</td><td>" + platform + "</td></tr>";

info += "<tr><td>安装的插件：</td><td>" + plugins + "</td></tr>";

info += "<tr><td>插件的数量：</td><td>" + plugins.length + "</td></tr>";

info += "<tr><td>插件的名称：</td><td>" + getPluginName() + "</td></tr>";

info += "<tr><td>用户设置的操作系统语言：</td><td>" + userLanguage + "</td></tr>";

info += "<tr><td>操作系统支持的默认语言：</td><td>" + systemLanguage + "</td></tr>";

info += "<tr><td>Director：</td><td>" + checkePlugs("Director") + "</td></tr>";

info += "<tr><td>javaEnabled：</td><td>" + navigator.javaEnabled() + "</td></tr>";

info += "<tr><td>是否有quickTime：</td><td>" + checkePlugs("QuickTime") + "</td></tr>";

info += "<tr><td>flash插件情况：</td><td>" + checkePlugs('Shockwave Flash') + "</td></tr>";

info += "<tr><td>是否有MediaPlayer：</td><td>" + checkePlugs("MediaPlayer") + "</td></tr>";

info += "<tr><td>是否有realPlayer:</td><td>" + checkePlugs("RealPlayer") + "</td></tr>";

info += "<tr><td>屏幕分辨率高度：</td><td>" + window.screen.height + "</td></tr>";

info += "<tr><td>屏幕分辨率宽度：</td><td>" + window.screen.width + "</td></tr>";

info += "<tr><td>颜色质量：</td><td>" + window.screen.colorDepth + "位</td></tr>";

info += "<tr><td>像素：</td><td>" + window.screen.deviceXDPI + "像素/英寸</td></tr>";

info += "<tr><td>字体是否平滑：</td><td>" + window.screen.fontSmoothingEnabled + "</td></tr>";

//info += "<tr><td>规定浏览器是否启用数据污点：</td><td>" + navigator.taintEnabled() + "</td></tr>";

info += "</table>";

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 = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450' >CPU 信息</td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr style='color: red'><td >CPU序列号:" + p.ProcessorID + "</td></tr>";

info += "<tr><td >" + p.Caption + "</td></tr>";

info += "<tr><td >CPU编号：" + p.DeviceID + "</td></tr>";

info += "<tr><td >CPU型号：" + p.Name + "</td></tr>";

info += "<tr><td >CPU状态：" + p.CpuStatus + "</td></tr>";

info += "<tr><td >CPU可用性：" + p.Availability + "</td></tr>";

info += "<tr><td >CUP Level：" + p.Level + "</td></tr>";

info += "<tr><td >主机名称：" + p.SystemName + "</td></tr>";

info += "<tr><td >Processor Type：" + p.ProcessorType + "</td></tr>";

}

info += "</table>";

return info;

}

function softDisk() { //软盘信息

var properties = service.ExecQuery("SELECT * FROM Win32_FloppyDrive");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>软盘信息</td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr><td >" + p.Description + "</td></tr>";

info += "<tr><td >" + p.DeviceID + "</td></tr>";

info += "<tr><td >" + p.Status + "</td></tr>";

info += "<tr><td >" + p.Manufacuturer + "</td></tr>";

}

info += "</table>";

return info;

}

function RomInfo() { //CD-ROM 信息

var properties = service.ExecQuery("SELECT * FROM Win32_CDROMDrive");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450' >CD-ROM 信息 </td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr><td >驱动器名称：" + p.Caption + "</td></tr>";

info += "<tr><td >描述：" + p.Description + "</td></tr>";

info += "<tr><td >盘符：" + p.Drive + "</td></tr>";

info += "<tr><td >驱动器状态：" + p.Status + "</td></tr>";

info += "<tr><td >是否在使用：" + p.MediaLoaded + "</td></tr>";

}

info += "</table>";

return info;

}

function keyBoardInfo() { //键盘信息

var properties = service.ExecQuery("SELECT * FROM Win32_Keyboard");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>键盘信息 </td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr><td >键盘描述：" + p.Description + "</td></tr>";

info += "<tr><td >键盘名称：" + p.Name + "</td></tr>";

info += "<tr><td >键盘状态：" + p.Status + "</td></tr>";

}

info += "</table>";

return info;

}

function mainBoard() { //主板信息

var properties = service.ExecQuery("SELECT * FROM Win32_BaseBoard");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>主板信息 </td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr style='color: red'><td >主板ID：" + p.SerialNumber + "</td></tr>";

info += "<tr><td >" + p.HostingBoard + "</td></tr>";

info += "<tr><td >制造商：" + p.Manufacturer + "</td></tr>";

info += "<tr><td >是否开启：" + p.PoweredOn + "</td></tr>";

info += "<tr><td >型号：" + p.Product + "</td></tr>";

info += "<tr><td >版本：" + p.Version + "</td></tr>";

}

info += "</table>";

return info;

}

function disk() { //硬盘序列号 信息

var properties = service.ExecQuery("SELECT * FROM Win32_DiskDrive");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>硬盘信息 </td></tr>";

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr style='color: red'><td >硬盘序列号：" + p.signature + "</td></tr>";

}

info += "</table>";

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 = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>内存信息 </td></tr>";

info += "<tr style='color: red'><td >内存总量：" + (mem[0].cap + mem[1].cap) + "M</td></tr>";

info += "<tr style='color: red'><td >可用物理内存：" + physicMenCap + "M</td></tr>";

info += "</table>";

return info;

}

//获取网络连接信息

function ipinfo() {

var properties = service.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration Where IPEnabled=TRUE");

var e = new Enumerator(properties);

var info = "<table border=1>";

info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>网络连接信息：</td></tr>";

var i = 1;

for (; !e.atEnd(); e.moveNext()) {

var p = e.item();

info += "<tr style='color: red'><td >MAC地址" + i + "：" + p.MACAddress + "</td></tr>";

info += "<tr style='color: red'><td >IP地址" + i + "：" + p.IPAddress(0) + "</td></tr>";

i++;

}

info += "</table>";

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>

嗯，就酱~~

相关文章