如何使用JavaScript确定确切的浏览器和版本?
当前回答
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
其他回答
这是我写来获取客户信息的
var ua = navigator.userAgent.toLowerCase();
var check = function(r) {
return r.test(ua);
};
var DOC = document;
var isStrict = DOC.compatMode == "CSS1Compat";
var isOpera = check(/opera/);
var isChrome = check(/chrome/);
var isWebKit = check(/webkit/);
var isSafari = !isChrome && check(/safari/);
var isSafari2 = isSafari && check(/applewebkit\/4/); // unique to
// Safari 2
var isSafari3 = isSafari && check(/version\/3/);
var isSafari4 = isSafari && check(/version\/4/);
var isIE = !isOpera && check(/msie/);
var isIE7 = isIE && check(/msie 7/);
var isIE8 = isIE && check(/msie 8/);
var isIE6 = isIE && !isIE7 && !isIE8;
var isGecko = !isWebKit && check(/gecko/);
var isGecko2 = isGecko && check(/rv:1\.8/);
var isGecko3 = isGecko && check(/rv:1\.9/);
var isBorderBox = isIE && !isStrict;
var isWindows = check(/windows|win32/);
var isMac = check(/macintosh|mac os x/);
var isAir = check(/adobeair/);
var isLinux = check(/linux/);
var isSecure = /^https/i.test(window.location.protocol);
var isIE7InIE8 = isIE7 && DOC.documentMode == 7;
var jsType = '', browserType = '', browserVersion = '', osName = '';
var ua = navigator.userAgent.toLowerCase();
var check = function(r) {
return r.test(ua);
};
if(isWindows){
osName = 'Windows';
if(check(/windows nt/)){
var start = ua.indexOf('windows nt');
var end = ua.indexOf(';', start);
osName = ua.substring(start, end);
}
} else {
osName = isMac ? 'Mac' : isLinux ? 'Linux' : 'Other';
}
if(isIE){
browserType = 'IE';
jsType = 'IE';
var versionStart = ua.indexOf('msie') + 5;
var versionEnd = ua.indexOf(';', versionStart);
browserVersion = ua.substring(versionStart, versionEnd);
jsType = isIE6 ? 'IE6' : isIE7 ? 'IE7' : isIE8 ? 'IE8' : 'IE';
} else if (isGecko){
var isFF = check(/firefox/);
browserType = isFF ? 'Firefox' : 'Others';;
jsType = isGecko2 ? 'Gecko2' : isGecko3 ? 'Gecko3' : 'Gecko';
if(isFF){
var versionStart = ua.indexOf('firefox') + 8;
var versionEnd = ua.indexOf(' ', versionStart);
if(versionEnd == -1){
versionEnd = ua.length;
}
browserVersion = ua.substring(versionStart, versionEnd);
}
} else if(isChrome){
browserType = 'Chrome';
jsType = isWebKit ? 'Web Kit' : 'Other';
var versionStart = ua.indexOf('chrome') + 7;
var versionEnd = ua.indexOf(' ', versionStart);
browserVersion = ua.substring(versionStart, versionEnd);
}else{
browserType = isOpera ? 'Opera' : isSafari ? 'Safari' : '';
}
var browser = navigator.appName;
var version = navigator.appVersion;
然而,请注意,两者并不一定反映事实。许多浏览器都可以设置为其他浏览器的掩码。例如,你不能总是确定用户是用IE6还是用伪装成IE6的Opera上网。
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
这是我正在使用的:
var ua = navigator.userAgent;
var info = {
browser: /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrom(e|ium)\W\d|CriOS\W\d/.test(ua) ? 'gc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
os: /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
touch: 'ontouchstart' in document.documentElement,
mobile: /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
tablet: /Tablet|iPad/i.test(ua),
};
信息属性:
browser: gc for Google Chrome; ie9-ie11 for IE; ie? for old or unknown IE; ed for Edge; ff for Firefox; sa for Safari; op for Opera. os: mac win7 win8 win10 winnt winxp winvista linux nix mobile: a for Android; i for iOS (iPhone iPad); w for Windows Phone; b for Blackberry; s for undetected mobile running Safari; 1 for other undetected mobile; 0 for non-mobile touch: true for touch enabled devices, including touch laptops/notebooks that has both mouse and touch together; false for no touch support tablet: true or false
https://jsfiddle.net/oriadam/ncb4n882/
通常最好尽可能避免使用特定于浏览器的代码。JQuery $。属性可用于检测对特定特性的支持,而不是依赖于浏览器名称和版本。
以Opera为例,你可以伪造internet explorer或firefox实例。
JQuery的详细描述。支持可以在这里找到:http://api.jquery.com/jQuery.support/
现在根据jQuery弃用。
我们强烈建议使用外部库,如Modernizr 而不是依赖于jQuery.support中的属性。
在编写网站代码时,我总是确保,像导航这样的基本功能对非js用户也是可以访问的。这可能是讨论的对象,如果主页是针对特殊受众,可以忽略。