检测浏览器及其版本

此代码片段基于MDN的文章。他们给出了可以用来检测浏览器名称的各种关键字的简短提示。

为了检测Edge和UCBrowser这样的浏览器，我做了一些改动

getBrowser = () => { const userAgent = navigator.userAgent; let browser = "unkown"; // Detect browser name browser = (/ucbrowser/i).test(userAgent) ? 'UCBrowser' : browser; browser = (/edg/i).test(userAgent) ? 'Edge' : browser; browser = (/googlebot/i).test(userAgent) ? 'GoogleBot' : browser; browser = (/chromium/i).test(userAgent) ? 'Chromium' : browser; browser = (/firefox|fxios/i).test(userAgent) && !(/seamonkey/i).test(userAgent) ? 'Firefox' : browser; browser = (/; msie|trident/i).test(userAgent) && !(/ucbrowser/i).test(userAgent) ? 'IE' : browser; browser = (/chrome|crios/i).test(userAgent) && !(/opr|opera|chromium|edg|ucbrowser|googlebot/i).test(userAgent) ? 'Chrome' : browser;; browser = (/safari/i).test(userAgent) && !(/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i).test(userAgent) ? 'Safari' : browser; browser = (/opr|opera/i).test(userAgent) ? 'Opera' : browser; // detect browser version switch (browser) { case 'UCBrowser': return `${browser}/${browserVersion(userAgent,/(ucbrowser)\/([\d\.]+)/i)}`; case 'Edge': return `${browser}/${browserVersion(userAgent,/(edge|edga|edgios|edg)\/([\d\.]+)/i)}`; case 'GoogleBot': return `${browser}/${browserVersion(userAgent,/(googlebot)\/([\d\.]+)/i)}`; case 'Chromium': return `${browser}/${browserVersion(userAgent,/(chromium)\/([\d\.]+)/i)}`; case 'Firefox': return `${browser}/${browserVersion(userAgent,/(firefox|fxios)\/([\d\.]+)/i)}`; case 'Chrome': return `${browser}/${browserVersion(userAgent,/(chrome|crios)\/([\d\.]+)/i)}`; case 'Safari': return `${browser}/${browserVersion(userAgent,/(safari)\/([\d\.]+)/i)}`; case 'Opera': return `${browser}/${browserVersion(userAgent,/(opera|opr)\/([\d\.]+)/i)}`; case 'IE': const version = browserVersion(userAgent,/(trident)\/([\d\.]+)/i); // IE version is mapped using trident version // IE/8.0 = Trident/4.0, IE/9.0 = Trident/5.0 return version ? `${browser}/${parseFloat(version) + 4.0}` : `${browser}/7.0`; default: return `unknown/0.0.0.0`; } } browserVersion = (userAgent,regex) => { return userAgent.match(regex) ? userAgent.match(regex)[2] : null; } console.log(getBrowser());

我用ASP代码做了一个检测浏览器，浏览器版本，OS和OS版本的脚本。 我在ASP中这样做的原因是因为我想将数据存储在日志数据库中。 所以我必须检测浏览器服务器端。

代码如下:

on error resume next
ua = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
moz = instr(ua,"mozilla")  
ffx = instr(ua,"firefox")  
saf = instr(ua,"safari")
crm = instr(ua,"chrome") 
max = instr(ua,"maxthon") 
opr = instr(ua,"opera")
ie4 = instr(ua,"msie 4") 
ie5 = instr(ua,"msie 5") 
ie6 = instr(ua,"msie 6") 
ie7 = instr(ua,"msie 7") 
ie8 = instr(ua,"trident/4.0")
ie9 = instr(ua,"trident/5.0")

if moz>0 then 
    BrowserType = "Mozilla"
    BrVer = mid(ua,moz+8,(instr(moz,ua," ")-(moz+8)))
end if
if ffx>0 then 
    BrowserType = "FireFox"
    BrVer = mid(ua,ffx+8)
end if
if saf>0 then 
    BrowserType = "Safari"
    BrVerPlass = instr(ua,"version")
    BrVer = mid(ua,BrVerPlass+8,(instr(BrVerPlass,ua," ")-(BrVerPlass+8)))
end if
if crm>0 then 
    BrowserType = "Chrome"
    BrVer = mid(ua,crm+7,(instr(crm,ua," ")-(crm+7)))
end if
if max>0 then 
    BrowserType = "Maxthon"
    BrVer = mid(ua,max+8,(instr(max,ua," ")-(max+8)))
end if
if opr>0 then 
    BrowserType = "Opera"
    BrVerPlass = instr(ua,"presto")
    BrVer = mid(ua,BrVerPlass+7,(instr(BrVerPlass,ua," ")-(BrVerPlass+7)))
end if
if ie4>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "4"
end if
if ie5>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "5"
end if
if ie6>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "6"
end if
if ie7>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "7"
end if
if ie8>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "8"
    if ie7>0 then BrVer = BrVer & " (in IE7 compability mode)"
end if
if ie9>0 then 
    BrowserType = "Internet Explorer"
    BrVer = "9"
    if ie7>0 then BrVer = BrVer & " (in IE7 compability mode)"
    if ie8>0 then BrVer = BrVer & " (in IE8 compability mode)"
end if

OSSel = mid(ua,instr(ua,"(")+1,(instr(ua,";")-instr(ua,"("))-1)
OSver = mid(ua,instr(ua,";")+1,(instr(ua,")")-instr(ua,";"))-1)

if BrowserType = "Internet Explorer" then
    OSStart = instr(ua,";")
    OSStart = instr(OSStart+1,ua,";")        
    OSStopp = instr(OSStart+1,ua,";")
    OSsel = mid(ua,OSStart+2,(OSStopp-OSStart)-2)
end if

    Select case OSsel
        case "windows nt 6.1"
            OS = "Windows"
            OSver = "7"
        case "windows nt 6.0"
            OS = "Windows"
            OSver = "Vista"
        case "windows nt 5.2"
            OS = "Windows"
            OSver = "Srv 2003 / XP x64"
        case "windows nt 5.1"
            OS = "Windows"
            OSver = "XP"
        case else
            OS = OSSel
    End select

Response.write "<br>" & ua & "<br>" & BrowserType & "<br>" & BrVer & "<br>" & OS & "<br>" & OSver & "<br>"

'Use the variables here for whatever you need........

这让我有了火狐的版本，

    let versionNumber = parseInt(window.navigator.userAgent.match(/Firefox\/([0- 
    9]+)\./)[1]);

以下是截至2019年5月处理浏览器检测的几个著名库。

Bowser by lancedikson - 3,761★s -最后更新于2019年5月26日- 4.8KB

var result = bowser.getParser(window.navigator.userAgent); console.log(结果); 文档。write("You are using " + result.parsedResult.browser.name + " v" + result.parsedResult.browser.version + “on”+ result.parsedResult.os.name); < script src = " https://unpkg.com/bowser@2.4.0 es5.js " > < /脚本>

*支持边缘基于铬

Platform.js by bestiejs - 2,250★s -最后更新于2018年10月30日- 5.9KB

console.log(平台); 文档。写上("你正在使用" + platform.name + . “V”+平台。版+ “On”+ platform.os); < script src = " https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js " > < /脚本>

jQuery浏览器由gabceb - 504★s -最后更新2015年11月23日- 1.3KB

console.log (.browser美元) 文档。写("你正在使用" + $.browser.name + " V " + $.browser。versionNumber + “On”+ $.browser.platform); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js " > < /脚本>

Detect.js(存档)by darcyclarke - 522★s -最后更新于2015年10月26日- 2.9KB

var result = detect.parse(navigator.userAgent); console.log(结果); 文档。write("You are using " + result.browser.family + “V”+ result.browser.version + “On”+ result.os.family); < script src = " https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js " > < /脚本>

浏览器检测(存档)由QuirksMode -最后更新2013年11月14日- 884B

console.log (BrowserDetect) 文档。write("You are using " + BrowserDetect. "浏览器+ v + BrowserDetect。版+ “on”+ BrowserDetect.OS); < script src = " https://kylemit.github.io/libraries/libraries/BrowserDetect.js " > < /脚本>

明显的提到:

该浏览器- 1355★s -最后更新于2018年10月2日 Modernizr - 23,397★s -最后更新2019年1月12日-喂喂喂马，特征检测应该驱动任何canIuse风格的问题。浏览器检测实际上只是为各个浏览器提供定制的图像、下载文件或说明。

进一步的阅读

堆栈溢出-浏览器检测JavaScript? 堆栈溢出-如何检测Safari, Chrome, IE, Firefox和Opera浏览器?

为此，您需要检查navigator的值。appVersion或navigator.userAgent 尝试使用:

console.log(navigator.appVersion)

为什么不另一个解决方案:

navigator.userAgent.includes("Firefox")? log("Mozilla") :log("Chrome")