1200字范文 > 如何检测Safari Chrome IE Firefox和Opera浏览器？

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

时间：2024-06-01 20:44:05

我有5个FF，Chrome，IE，Opera和Safari插件/扩展程序。

如何识别用户浏览器并重定向（一旦单击安装按钮）下载相应的插件？

#1楼

简单的一行JavaScript代码将为您提供浏览器的名称：

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

#2楼

您可以尝试以下方式检查浏览器版本。

<!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 < IE11alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));}return false;}}</script></body></html>

#3楼

我知道为此使用lib可能会过头，但是只是为了丰富线程，您可以检查is.js的执行方式：

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

#4楼

万一有人发现它有用，我将Rob W的答案做成一个返回浏览器字符串的函数，而不是让多个变量浮动。由于浏览器也无法真正改变而不重新加载，因此我使它缓存了结果，以防止下次调用该函数时需要对其进行处理。

/** * 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());

#5楼

这是Rob答案的调整版本，包括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);

这种方法的优点在于它依赖于浏览器引擎属性，因此它甚至涵盖了派生的浏览器，例如Yandex或Vivaldi，它们实际上与使用其引擎的主要浏览器兼容。 Opera是一个例外，它依赖于用户代理嗅探，但是今天（即15版及更高版本）甚至Opera本身仅是Blink的外壳。

#6楼

这种结合了罗布的原来的答案和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;

#7楼

如果您需要了解某些特定浏览器的数字版本，可以使用以下代码段。目前，它将告诉您Chrome / Chromium / Firefox的版本：

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

#8楼

您可以使用tryandcatch来使用不同的浏览器错误消息。 IE和edge混杂在一起，但是我使用了Rob W的鸭子打字（基于此处的项目： https ： ///computer-programming/i-have-opera/2395080328 ）。

#9楼

谢谢大家。我在最近的浏览器上测试了以下代码段：Chrome 55，Firefox 50，IE 11和Edge 38，并提出了以下组合，它们对我所有的浏览器均有效。我敢肯定它可以改进，但是对于任何需要的人来说，这都是一个快速的解决方案：

它将带有浏览器名称的CSS类添加到HTML。

#10楼

还有一种不太“ hacky”的方法适用于所有流行的浏览器。 Google在其Closure Library中包含了一个浏览器检查。特别要看一下goog.userAgent和goog.userAgent.product。这样，如果浏览器呈现的方式发生某些变化，您也可以保持最新（假设您始终运行最新版本的闭包编译器。）

#11楼

#12楼

在这里，您可以找到正在运行的浏览器。

function isValidBrowser(navigator){var isChrome = navigator.indexOf('chrome'),isFireFox= navigator.indexOf('firefox'),isIE = navigator.indexOf('trident') ,isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox Browser")}if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}}

#13楼

简短的变体

var browser = (function(){ var test = function(regexp) { return regexp.test(window.navigator.userAgent);} switch(true){ case test(/edge/i): return "edge"; case test(/opr/i) && (!!window.opr || !!window.opera): return "opera"; case test(/chrome/i) && !!window.chrome: return "chrome"; case test(/trident/i) : return "ie"; case test(/firefox/i) : return "firefox"; case test(/safari/i): return "safari"; default: return "other"; } })(); console.log(browser)

#14楼

截至5月，这是几个处理浏览器检测的著名库。

lancedikson开发的Bowser -3,761★s-最新更新时间5月26日-4.8KB

var result = bowser.getParser(window.navigator.userAgent); console.log(result); document.write("You are using " + result.parsedResult.browser.name + " v" + result.parsedResult.browser.version + " on " + result.parsedResult.os.name);

<script src="/bowser@2.4.0/es5.js"></script>

bestiejs的Platform.js -2,250★s-最近更新-10月30日-5.9KB

console.log(platform); document.write("You are using " + platform.name + " v" + platform.version + " on " + platform.os);

<script src="/ajax/libs/platform/1.3.5/platform.min.js"></script>

gabceb的jQuery浏览器 -504★s-最近更新，11月23日-1.3KB

console.log($.browser) document.write("You are using " + $.browser.name + " v" + $.browser.versionNumber + " on " + $.browser.platform);

<script src="/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

darcyclarke编写的Detect.js（已存档） -522★s-最新更新时间为10月26日-2.9KB

var result = detect.parse(navigator.userAgent); console.log(result); document.write("You are using " + result.browser.family + " v" + result.browser.version + " on " + result.os.family);

<script src="/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

由QuirksMode 浏览器检测（存档） -最近更新时间11月14日-884B

console.log(BrowserDetect) document.write("You are using " + BrowserDetect.browser + " v" + BrowserDetect.version + " on " + BrowserDetect.OS);

<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>

值得注意的是：

whichBrowser -1,355★s-最后更新于10月2日 Modernizr -23,397★s-最后更新于1月12日-要喂饱一匹马，特征检测应该会引发任何canIuse风格的问题。浏览器检测实际上仅用于为各个浏览器提供自定义图像，下载文件或说明。

进一步阅读

堆栈溢出-JavaScript中的浏览器检测？堆栈溢出-如何检测浏览器的版本？

#15楼

UAParser是轻量级JavaScript库之一，可从userAgent字符串识别浏览器，引擎，操作系统，CPU和设备类型/模型。

有可用的CDN。在这里，我提供了一个示例代码来使用UAParser检测浏览器。

<!doctype html><html><head><script src="/npm/ua-parser-js@0/dist/ua-parser.min.js"></script><script type="text/javascript">var parser = new UAParser();var result = parser.getResult();console.log(result.browser);// {name: "Chromium", version: "15.0.874.106"}</script></head><body></body></html>

现在，您可以使用result.browser的值对页面进行有条件的编程。

源教程：如何使用JavaScript检测浏览器，引擎，操作系统，CPU和设备？

#16楼

不知道它是否对任何人有用，但是这里有一个使TypeScript满意的变体。

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

}

#17楼

在台式机和移动设备上检测浏览器：Edge，Opera，Chrome，Safari，Firefox，IE

我在@nimesh代码中做了一些更改，现在它也适用于Edge，并且修复了Opera问题：

感谢@nimesh用户：2063564

#18楼

我们可以使用下面的util方法

utils.isIE = function () {var ver = navigator.userAgent;return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11};utils.isIE32 = function () {return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);};utils.isChrome = function () {return (window.chrome);};utils.isFF64 = function () {var agent = navigator.userAgent;return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);};utils.isFirefox = function () {return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);};

#19楼

const isChrome = /Chrome/.test(navigator.userAgent)const isFirefox = /Firefox/.test(navigator.userAgent)

#20楼

谁能解释为什么Chrome被检测为闪烁以及如何将其分开？目前，我正在使用Chrome

#21楼

谷歌浏览器可靠检测通常会导致检查用户代理字符串。这种方法不可靠，因为欺骗这个值很简单。

我已经编写了一种通过鸭嘴式检测浏览器的方法。

仅在确实需要时才使用浏览器检测方法，例如显示特定于浏览器的安装扩展说明。尽可能使用特征检测。

演示： https : ///6spj1059/

// 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 - 71 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; 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 += 'isEdge: ' + isEdge + '<br>'; output += 'isBlink: ' + isBlink + '<br>'; document.body.innerHTML = output;

可靠性分析

先前的方法取决于呈现引擎的属性（-moz-box-sizing和-webkit-transform）来检测浏览器。这些前缀最终将被删除，因此为了使检测更加可靠，我切换到特定于浏览器的特征：

Internet Explorer：JScript的条件编译（直到IE9）和document.documentMode。 Edge：在Trident和Edge浏览器中，Microsoft的实现公开了StyleMedia构造函数。排除三叉戟使我们陷入困境。 Firefox：Firefox的用于安装加载项的API：InstallTriggerChrome：全局chrome对象，包含多个属性，包括已记录的chrome.webstore对象。 Update 3chrome.webstore已被弃用，并且在最新版本中未定义 Safari：构造函数命名中的独特命名模式。这是所有列出的属性中最不耐用的方法，您猜怎么着？在Safari 9.1.3中已修复。因此，我们正在检查7.1版之后引入的SafariRemoteNotification，以涵盖3.0版及更高版本的所有SafariRemoteNotification。 Opera：window.opera已经存在多年了，但是当Opera用Blink + V8（由Chromium使用）替换其引擎时，它将被删除。更新1： Opera 15已发布，其UA字符串类似于Chrome，但增加了“ OPR”。在此版本中，定义了chrome对象（但chrome.webstore）。由于Opera会努力克隆Chrome，因此我使用了用户代理嗅探功能。更新2：!!window.opr && opr.addons可用于检测Opera 20+ （常绿）。 Blink：Google启用Chrome 28后，Blink中引入了CSS.supports()。当然，这与Opera中使用的Blink相同。