我一直在寻找可以检测访问网站的用户使用的是火狐3还是火狐4的代码。我所找到的只是检测浏览器类型而不是版本的代码。
如何检测这样的浏览器版本?
当前回答
这里有更好的兼容性@kennebec snippet; 将返回浏览器名称和版本(返回72而不是72.0.3626.96)。
在Safari, Chrome, Opera, Firefox, IE, Edge, UCBrowser上测试，也在移动设备上测试。
function browser() {
var userAgent = navigator.userAgent,
match = userAgent.match(/(opera|chrome|crios|safari|ucbrowser|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [],
result = {},
tem;
if (/trident/i.test(match[1])) {
tem = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
result.name = "Internet Explorer";
} else if (match[1] === "Chrome") {
tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
if (tem && tem[1]) {
result.name = tem[0].indexOf("Edge") === 0 ? "Edge" : "Opera";
}
}
if (!result.name) {
tem = userAgent.match(/version\/(\d+)/i); // iOS support
result.name = match[0].replace(/\/.*/, "");
if (result.name.indexOf("MSIE") === 0) {
result.name = "Internet Explorer";
}
if (userAgent.match("CriOS")) {
result.name = "Chrome";
}
}
if (tem && tem.length) {
match[match.length - 1] = tem[tem.length - 1];
}
result.version = Number(match[match.length - 1]);
return result;
}
其他回答
以下是截至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浏览器?
浏览器JavaScript库提供了此功能。
if (bowser.msie && bowser.version <= 6) {
alert('Hello China');
}
它似乎保养得很好。
对于任何使用angular的PWA应用程序，你都可以在index.html -的body部分中检查浏览器是否受支持
<body>
<div id="browser"></div>
<script>
var operabrowser = true;
operabrowser = (navigator.userAgent.indexOf('Opera Mini') > -1);
if (operabrowser) {
txt = "<p>Browser not supported use different browser...</p>";
document.getElementById("browser").innerHTML = txt;
}
</script>
</body>
加上我自己对赫尔曼答案的实现。我需要操作系统检测，所以它被添加。还包括一些ES6代码(因为我们有一个转译器)，你可能需要es5化。
detectClient() {
let nav = navigator.appVersion,
os = 'unknown',
client = (() => {
let agent = navigator.userAgent,
engine = agent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [],
build;
if(/trident/i.test(engine[1])){
build = /\brv[ :]+(\d+)/g.exec(agent) || [];
return {browser:'IE', version:(build[1] || '')};
}
if(engine[1] === 'Chrome'){
build = agent.match(/\bOPR\/(\d+)/);
if(build !== null) {
return {browser: 'Opera', version: build[1]};
}
}
engine = engine[2] ? [engine[1], engine[2]] : [navigator.appName, nav, '-?'];
if((build = agent.match(/version\/(\d+)/i)) !== null) {
engine.splice(1, 1, build[1]);
}
return {
browser: engine[0],
version: engine[1]
};
})();
switch (true) {
case nav.indexOf('Win') > -1:
os = 'Windows';
break;
case nav.indexOf('Mac') > -1:
os = 'MacOS';
break;
case nav.indexOf('X11') > -1:
os = 'UNIX';
break;
case nav.indexOf('Linux') > -1:
os = 'Linux';
break;
}
client.os = os;
return client;
}
返回:对象{浏览器:"Chrome"，版本:"50"，操作系统:"UNIX"}
检测浏览器及其版本
此代码片段基于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());
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
