如何使用JavaScript确定确切的浏览器和版本?
当前回答
如果你想要一个返回浏览器和版本的函数,这里是对原始答案的改进:
navigator.browserInfo =
(
function()
{
var browser = '';
var version = '';
var idString = '';
var ua = navigator.userAgent;
var tem = [];
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i);
//IE will be identified as 'Trident' and a different version number. The name must be corrected to 'Internet Explorer' and the correct version identified.
//ie correction
if(/trident/i.test(M[1]))
{
tem = /\brv[ :]+(\d+.?\d*)/g.exec(ua) || [];
browser = 'Internet Explorer';
version = tem[1];
}
//firefox
else if(/firefox/i.test(M[1]))
{
tem = /\brv[ :]+(\d+.?\d*)/g.exec(ua) || [];
browser = 'Firefox';
version = tem[1];
}
//safari
else if(/safari/i.test(M[1]))
{
tem = ua.match(/\bVersion\/(\d+.?\d*\s*\w+)/);
browser = 'Safari';
version = tem[1];
}
//If 'Chrome' is found, it may be another browser.
else if(M[1] === 'Chrome')
{
//opera
var temOpr = ua.match(/\b(OPR)\/(\d+.?\d*.?\d*.?\d*)/);
//edge
var temEdge = ua.match(/\b(Edge)\/(\d+.?\d*)/);
//chrome
var temChrome = ua.match(/\b(Chrome)\/(\d+.?\d*.?\d*.?\d*)/);
//a genuine 'Chrome' reading will result from ONLY temChrome not being null.
var genuineChrome = temOpr == null && temEdge == null && temChrome != null;
if(temOpr != null)
{
browser = temOpr[1].replace('OPR', 'Opera');
version = temOpr[2];
}
if(temEdge != null)
{
browser = temEdge[1];
version = temEdge[2];
}
if(genuineChrome)
{
browser = temChrome[1];
version = temChrome[2];
}
}
//There will be some odd balls, so if you wish to support those browsers, add functionality to display those browsers as well.
if(browser == '' || version == '')
{
idString = 'We couldn\'t find your browser, but you can still use the site';
}
else
{
idString = browser + ' version ' + version;
}
alert('Your browser is ' + idString);
//store the type of browser locally
if(typeof(Storage) !== "undefined")
{
//Store
localStorage.setItem('browser', browser);
localStorage.setItem('version', version);
}
else
{
alert('local storage not available');
}
}
)();
这样,它还将结果存储在本地,因此不必每次都执行该检查。
其他回答
var browser = navigator.appName;
var version = navigator.appVersion;
然而,请注意,两者并不一定反映事实。许多浏览器都可以设置为其他浏览器的掩码。例如,你不能总是确定用户是用IE6还是用伪装成IE6的Opera上网。
下面的代码片段将显示如何显示UI元素取决于IE版本和浏览器
$(document).ready(function () {
var msiVersion = GetMSIieversion();
if ((msiVersion <= 8) && (msiVersion != false)) {
//Show UI elements specific to IE version 8 or low
} else {
//Show UI elements specific to IE version greater than 8 and for other browser other than IE,,ie..Chrome,Mozila..etc
}
}
);
下面的代码将给出我们如何获得IE版本
function GetMSIieversion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser like Chrome,Mozila..etc
return false;
}
下面是我如何为Internet Explorer做自定义CSS:
在我的JavaScript文件:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
jQuery(document).ready(function(){
if(var_isIE){
if(var_isIE == 10){
jQuery("html").addClass("ie10");
}
if(var_isIE == 8){
jQuery("html").addClass("ie8");
// you can also call here some function to disable things that
//are not supported in IE, or override browser default styles.
}
}
});
然后在我的CSS文件中,定义每个不同的样式:
.ie10 .some-class span{
.......
}
.ie8 .some-class span{
.......
}
我做了这个小函数,希望对大家有帮助。在这里你可以找到最新的版本 browserDetection
function detectBrowser(userAgent){
var chrome = /.*(Chrome\/).*(Safari\/).*/g;
var firefox = /.*(Firefox\/).*/g;
var safari = /.*(Version\/).*(Safari\/).*/g;
var opera = /.*(Chrome\/).*(Safari\/).*(OPR\/).*/g
if(opera.exec(userAgent))
return "Opera"
if(chrome.exec(userAgent))
return "Chrome"
if(safari.exec(userAgent))
return "Safari"
if(firefox.exec(userAgent))
return "Firefox"
}
通常最好尽可能避免使用特定于浏览器的代码。JQuery $。属性可用于检测对特定特性的支持,而不是依赖于浏览器名称和版本。
以Opera为例,你可以伪造internet explorer或firefox实例。
JQuery的详细描述。支持可以在这里找到:http://api.jquery.com/jQuery.support/
现在根据jQuery弃用。
我们强烈建议使用外部库,如Modernizr 而不是依赖于jQuery.support中的属性。
在编写网站代码时,我总是确保,像导航这样的基本功能对非js用户也是可以访问的。这可能是讨论的对象,如果主页是针对特殊受众,可以忽略。