如何检测Safari，Chrome，IE，Firefox和Opera浏览器？

我有5个插件/扩展FF，铬，IE浏览器，歌剧和Safari。

我需要的代码来识别用户浏览器和redirect（点击安装button）下载相应的插件。

Google浏览器可靠的检测通常会导致检查用户代理string。 这种方法是不可靠的，因为欺骗这个值是微不足道的。
我写了一个方法来检测浏览器鸭子打字 。

只有在真正有必要时才使用浏览器检测方法，例如显示浏览器特定的指令来安装扩展。 尽可能使用function检测。

演示： https ： //jsfiddle.net/311aLtkz/ 

// Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification)); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS;

可靠性分析

前面的方法取决于渲染引擎的属性（ -moz-box-sizing和-webkit-transform ）来检测浏览器。 这些前缀最终会被删除，所以为了使检测更加健壮，我转向了浏览器特有的特性：

  • Internet Explorer：JScript的条件编译 （直到IE9）和document.documentMode 。
  • 边缘：在Trident和Edge浏览器中，Microsoft的实现暴露了StyleMedia构造函数。 不包括三叉戟给我们留下了Edge。
  • Firefox：Firefox的API来安装附件： InstallTrigger
  • Chrome：全局chrome对象，包含多个属性，包括logging的chrome.webstore对象。
  • Safari：命名构造函数的独特命名模式。 这是所有列出的属性的最不耐久的方法，并猜测什么？ 在Safari 9.1.3中，它是固定的。 因此，我们正在对7.1版之后推出的SafariRemoteNotification进行检查，以覆盖3.0以上的所有Safaris。
  • Opera： window.opera已经存在好几年了，但是当Opera用Blink + V8（由Chromium使用）replace它的引擎时，它将会被删除 。
    • 更新1： Opera 15已经发布 ，它的UAstring看起来像Chrome，但增加了“OPR”。 在这个版本中， chrome对象被定义（但chrome.webstore不是）。 由于Opera努力克隆Chrome，我使用用户代理嗅探来达到这个目的。
    • 更新2： !!window.opr && opr.addons可以用来检测Opera 20+ （常青树）。
  • 闪烁：一旦Google打开Chrome 28， CSS.supports() 在Blink中引入 。当然，Opera中也使用了相同的Blink。

成功testing：

  • Firefox 0.8 – 44
  • Chrome 1.0 – 48
  • 歌剧8.0 – 34
  • Safari 3.0 – 10
  • IE 6 – 11
  • 边缘 – 20-25

2016年11月更新，包括从9.1.3及更高版本检测Safari浏览器

你可以试试下面的方法来检查浏览器版本。 

  <!DOCTYPE html> <html> <body> <p>What is the name(s) of your browser?</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) { alert('Opera'); } else if(navigator.userAgent.indexOf("Chrome") != -1 ) { alert('Chrome'); } else if(navigator.userAgent.indexOf("Safari") != -1) { alert('Safari'); } else if(navigator.userAgent.indexOf("Firefox") != -1 ) { alert('Firefox'); } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10 { alert('IE'); } else { alert('unknown'); } } </script> </body> </html>

如果你只需要知道IE浏览器版本，那么你可以按照下面的代码。 此代码适用于从IE6到IE11的版本 

 <!DOCTYPE html> <html> <body> <p>Click on Try button to check IE Browser version.</p> <button onclick="getInternetExplorerVersion()">Try it</button> <p id="demo"></p> <script> function getInternetExplorerVersion() { var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); var rv = -1; if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number { if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) { //For IE 11 > if (navigator.appName == 'Netscape') { var ua = navigator.userAgent; var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) { rv = parseFloat(RegExp.$1); alert(rv); } } else { alert('otherbrowser'); } } else { //For < IE11 alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)))); } return false; }} </script> </body> </html>

我知道这可能是矫枉过正的使用一个lib，但只是为了丰富线程，你可以检查is.js的方式做到这一点： 

 is.firefox(); is.ie(6); is.not.safari();

如果有人发现这个有用的话，我已经把Rob W的答案变成了一个返回浏览器string的函数，而不是让多个variables浮动。 既然浏览器也不能在没有重新加载的情况下真的改变了，我已经把它caching起来了，以防下次调用这个函数的时候需要这个结果。 

 /** * Gets the browser name or returns an empty string if unknown. * This function also caches the result to provide for any * future calls this function has. * * @returns {string} */ var browser = function() { // Return cached result if avalible, else get result then cache it. if (browser.prototype._cachedResult) return browser.prototype._cachedResult; // Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; return browser.prototype._cachedResult = isOpera ? 'Opera' : isFirefox ? 'Firefox' : isSafari ? 'Safari' : isChrome ? 'Chrome' : isIE ? 'IE' : isEdge ? 'Edge' : isBlink ? 'Blink' : "Don't know"; }; console.log(browser());

这里是Rob的答案的2016年调整版本，包括Microsoft Edge和检测Blink：

（ 编辑 ：我用这个信息更新了Rob的回答。） 

 // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection isBlink = (isChrome || isOpera) && !!window.CSS; /* Results: */ console.log("isOpera", isOpera); console.log("isFirefox", isFirefox); console.log("isSafari", isSafari); console.log("isIE", isIE); console.log("isEdge", isEdge); console.log("isChrome", isChrome); console.log("isBlink", isBlink);

您可以使用try和catch来使用不同的浏览器错误消息。 IE和Edge混在一起，但是我用Rob W.的鸭子打字。 

 var getBrowser = function() { var b = "unknown"; try { var e; var f = e.width; } catch (e) { var err = e.toString(); if(err.search("not an object") !== -1){ return "safari"; } else if(err.search("Cannot read") !== -1){ return "chrome"; } else if(err.search("e is undefined") !== -1){ return "firefox"; } else if(err.search("Unable to get property 'width' of undefined or null reference") !== -1){ if(!(false || !!document.documentMode) && !!window.StyleMedia){ return "edge"; } else { return "IE"; } } else if(err.search("cannot convert e into object") !== -1){ return "opera"; } else { return undefined; } } };

对于所有stream行的浏览器来说，还有一个不太“黑客”的方法。 Google在其Closure Library中包含了一个浏览器检查。 尤其要看看goog.userAgent和goog.userAgent.product 。 通过这种方式，如果浏览器出现的方式发生了变化（因为您始终运行最新版本的闭包编译器），您也是最新的。 

 var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "Other"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"; }, searchString: function (data) { for (var i = 0; i < data.length; i++) { var dataString = data[i].string; this.versionSearchString = data[i].subString; if (dataString.indexOf(data[i].subString) !== -1) { return data[i].identity; } } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) { return; } var rv = dataString.indexOf("rv:"); if (this.versionSearchString === "Trident" && rv !== -1) { return parseFloat(dataString.substring(rv + 3)); } else { return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); } }, dataBrowser: [ {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"}, {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"}, {string: navigator.userAgent, subString: "Trident", identity: "Explorer"}, {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"}, {string: navigator.userAgent, subString: "Opera", identity: "Opera"}, {string: navigator.userAgent, subString: "OPR", identity: "Opera"}, {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, {string: navigator.userAgent, subString: "Safari", identity: "Safari"} ] }; BrowserDetect.init(); var bv= BrowserDetect.browser; if( bv == "Chrome"){ $("body").addClass("chrome"); } else if(bv == "MS Edge"){ $("body").addClass("edge"); } else if(bv == "Explorer"){ $("body").addClass("ie"); } else if(bv == "Firefox"){ $("body").addClass("Firefox"); } $(".relative").click(function(){ $(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500); $(".oc1").css({ 'width' : '100%', 'margin-left' : '0px', }); });

这结合了Rob的原始答案和2016年Pilau的更新 

  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;

如果你需要知道什么是某个特定的浏览器的数字版本，你可以使用下面的代码片段。 目前它会告诉你Chrome / Chromium / Firefox的版本： 

 var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./); var ver = match ? parseInt(match[1]) : 0;

谢谢大家。 我在最近的浏览器上testing了代码片段：Chrome 55，Firefox 50，IE 11和Edge 38，然后我想出了以下组合，这些组合对我来说都是一样的。 我相信它可以得到改善，但对于需要的人来说，这是一个快速解决scheme： 

  var browser_name = ''; isIE = /*@cc_on!@*/false || !!document.documentMode; isEdge = !isIE && !!window.StyleMedia; if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge) { browser_name = 'chrome'; } else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge) { browser_name = 'safari'; } else if(navigator.userAgent.indexOf("Firefox") != -1 ) { browser_name = 'firefox'; } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10 { browser_name = 'ie'; } else if(isEdge) { browser_name = 'edge'; } else { browser_name = 'other-browser'; } $('html').addClass(browser_name);

它使用浏览器的名称向HTML添加一个CSS类。

简单，单行的JavaScript代码会给你浏览器的名字： 

 function GetBrowser() { return navigator ? navigator.userAgent.toLowerCase() : "other"; }
Interesting Posts

在jQuery中检测移动设备的最佳方法是什么？

JavaScript中的浏览器检测？

如何为Mozilla，Chrome和IE编写特定的CSS

你怎么能检测浏览器的版本？

检测iOS / Android操作系统

JavaScript：如何找出用户浏览器是否为Chrome？

什么是$ .browser的替代

在JavaScript中检测IE版本（在v9之前）

使用jQuery来检测设备是否可以拨打电话（支持“tel：//”协议）

使用jQuery.support检测IE6