js獲取瀏覽器信息及版本（兼容IE）

本文轉載自查看原文 2019-03-10 18:47 4256 JavaScript/ js

　　獲取瀏覽器信息方法有很多種，但是要是兼容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>

嗯，就醬~~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS 獲取瀏覽器的名稱和版本信息 js獲取瀏覽器類型和版本信息 js判斷IE瀏覽器版本（IE8及以下） js判斷是否是ie瀏覽器且給出ie版本 JavaScript獲取瀏覽器版本等信息 JS 實現兼容IE瀏覽器報警提示聲音 IE瀏覽器，各版本的請求頭信息 js中獲取瀏覽器信息 js獲取瀏覽器對象的信息 html頁面中js判斷瀏覽器是否是IE瀏覽器及IE瀏覽器版本