在客户端获取浏览器的名称答案

【问题标题】：Getting a browser's name client-side在客户端获取浏览器的名称
【发布时间】：2012-09-11 10:58:12
【问题描述】：

是否有任何对象或方法返回有关浏览器、客户端的数据？

例如，我需要检测浏览器是否为 IE（Inner Explorer）。以下是代码sn-p。

function isInternetExplorer()
{
    if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
    {
        return true;
    }
    return false;
}

有没有更好的办法？

【问题讨论】：

标签： javascript browser cross-browser

【解决方案1】：

编辑： 由于答案对较新版本的 jquery 无效，因为 jQuery.browser 在 1.9 版中已弃用，因此请使用 Jquery Migrate Plugin。

原答案

jQuery.browser

jQuery.browser 和 jQuery.browser.version

是你要走的路...

【讨论】：

问题与 jQuery 无关
但不应该这样。没有人提到 jQuery。
jQuery.browser 和 jQuery.browser.version 返回undefined
使用jQuery.browser; 与navigator.appName; 有类似的问题，即多个浏览器将返回相似的值。现在大多数浏览器都是基于 Chromium 的，所以 jQuery.browser; 将有 chrome: true;，即使浏览器实际上不是 Google Chrome（即 Microsoft Edge 和 Opera）。使用navigator.userAgent; 可以提供更多信息，这些信息可以被解析以进行更准确的评估。而且，它是纯 JavaScript。

【解决方案2】：

在c#中你的浏览器名称使用：

System.Web.HttpBrowserCapabilities browser = Request.Browser;

详情见链接。

http://msdn.microsoft.com/en-us/library/3yekbd5b%28v=vs.100%29.aspx

在客户端：

JQuery：

jQuery.browser

详情见链接：

http://api.jquery.com/jQuery.browser/

【讨论】：

【解决方案3】：

浏览器在navigator.userAgent 中公开了它。如果您使用的是 jQuery，最好使用 @Rab Nawaz 所说的 jQuery.browser。但是，正如 API 文档所说，如果可能，最好检查功能支持。引用文档：

我们建议不要使用此属性；请尝试改用特征检测（参见jQuery.support）。 jQuery.browser 可能会在 jQuery 的未来版本中移动到插件中。

这是一个代码示例：

function isIE() {
    if (window.jQuery) {
        return jQuery.browser.msie || false;
    } else {
        // adapted from jQuery's source:
        return navigator.userAgent.toLowerCase().indexOf('msie') >= 0;
    }
}

【讨论】：

navigator 方法适合我的工作，因为它总体上减少了对 jQuery 库的依赖。谢谢

【解决方案4】：

这完全取决于您真正想做的事情，但在未来和现在，最好的方法是避免浏览器检测并检查功能。像 Canvas、Audio、WebSockets 等通过简单的 javascript 调用或在您的 CSS 中，对我来说，您最好的方法是使用像 @987654321 这样的工具@：

与传统但高度不可靠的“UA 嗅探”方法不同，即通过其（用户可配置的）navigator.userAgent 属性检测浏览器，Modernizr 进行实际特征检测可靠地辨别各种浏览器能做什么和不能做什么。

如果使用 CSS，你可以这样做：

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

因为它会将所有功能作为类名加载并附加到 <html> 元素中，您将能够根据 CSS 进行任何操作。

您甚至可以根据功能加载文件，例如，如果浏览器不支持原生支持，则加载 polyfill js 和 css

Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

从 javascript 请求功能的简单示例：

http://jsbin.com/udoyic/1

【讨论】：

【解决方案5】：

JavaScript 方面 - 您可以通过这些方式获取浏览器名称...

if(window.navigator.appName == "") OR if(window.navigator.userAgent == "")

【讨论】：

使用这个的问题是在Firefox中执行时会返回Netscape。我认为更可靠的方法是window.navigator.userAgent。
您似乎已从我的帖子中删除了您的回复，所以我将其发布在这里。阅读后请随意删除。
我，这位 OP，也没有投反对票。但我可以想到它被否决的两个原因。首先是参数没有放错（你在没有检查问题是否更复杂的情况下就得出了结论）。其次是它实际上没有回答这个问题。插入的值将为空或创建错误。话虽如此，我会支持你，这样你就不会失去太多的代表。但是你的回复并没有达到赞成的程度，真的。我仍然会这样做，因为 -2 太苛刻了。不过，将来您可能会问自己 - 真的那么简单吗？。通常不是。
感谢@KonradViltersten 在这里给我发消息。我已经接受了我的错误并删除了我的答案......这是我的错误。急于获得声誉但失去了 4 分：D - BTW 好问题。
是的，投反对票很麻烦。我更喜欢发表评论。我可以给你一个疯狂的支持，因为你似乎理解这个错误。惩罚更聪明的人没有意义。

【解决方案6】：

这是纯 JavaScript 解决方案。我是必需的。
我尝试了不同的浏览器。它工作正常。希望能帮助到你。

How do I detect the browser name ?

您可以使用navigator.appName 和navigator.userAgent 属性。 userAgent 属性比appName 更可靠，因为例如，Firefox（和其他一些浏览器）可能会返回字符串“Netscape”作为navigator.appName 的值以与Netscape Navigator 兼容。

但是请注意，navigator.userAgent 也可能被欺骗 - 也就是说，客户端几乎可以用任何字符串替换他们的 userAgent。因此，无论我们从 appName 或 userAgent 中推断出什么，都应该持保留态度。

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
   browserName = "Opera";
   fullVersion = nAgt.substring(verOffset+6);
   if ((verOffset=nAgt.indexOf("Version"))!=-1) 
     fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
   browserName = "Microsoft Internet Explorer";
   fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
   browserName = "Chrome";
   fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
   browserName = "Safari";
   fullVersion = nAgt.substring(verOffset+7);
   if ((verOffset=nAgt.indexOf("Version"))!=-1) 
     fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
    browserName = "Firefox";
    fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
    browserName = nAgt.substring(nameOffset,verOffset);
    fullVersion = nAgt.substring(verOffset+1);
    if (browserName.toLowerCase()==browserName.toUpperCase()) {
       browserName = navigator.appName;
    }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
    fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
    fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
    fullVersion  = ''+parseFloat(navigator.appVersion); 
    majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
                +'Browser name  = '+browserName+'<br>'
                +'Full version  = '+fullVersion+'<br>'
                +'Major version = '+majorVersion+'<br>'
                +'navigator.appName = '+navigator.appName+'<br>'
                +'navigator.userAgent = '+navigator.userAgent+'<br>');

From the source javascripter.net

【讨论】：

我的 IE 11 在 userAgent 中没有 MSIE
@mircaea iOS 上的 Chrome 实际上是 Safari。 stackoverflow.com/questions/11259152/…
这无法识别 Edge。它显示为带有此代码的 Chrome。我将添加我发现适用于所有浏览器的解决方案。

【解决方案7】：

这个答案在

How to detect Safari, Chrome, IE, Firefox and Opera browser?

检查this fiddle。

希望这会有所帮助。

【讨论】：

小提琴返回：isFirefox: false isChrome: false isSafari: false isOpera: false isIE: false isEdge: false isBlink: false（我在Linux上使用最新的Chrome）

【解决方案8】：

此代码将返回“browser”和“browserVersion”
适用于 80 多种浏览器中的 95%

var geckobrowsers;
var browser = "";
var browserVersion = 0;
var agent = navigator.userAgent + " ";
if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("like Gecko") != -1){
    geckobrowsers = agent.substring(agent.indexOf("like Gecko")+10).substring(agent.substring(agent.indexOf("like Gecko")+10).indexOf(") ")+2).replace("LG Browser", "LGBrowser").replace("360SE", "360SE/");
    for(i = 0; i < 1; i++){
        geckobrowsers = geckobrowsers.replace(geckobrowsers.substring(geckobrowsers.indexOf("("), geckobrowsers.indexOf(")")+1), "");
    }
    geckobrowsers = geckobrowsers.split(" ");
    for(i = 0; i < geckobrowsers.length; i++){
        if(geckobrowsers[i].indexOf("/") == -1)geckobrowsers[i] = "Chrome";
        if(geckobrowsers[i].indexOf("/") != -1)geckobrowsers[i] = geckobrowsers[i].substring(0, geckobrowsers[i].indexOf("/"));
    }
    if(geckobrowsers.length < 4){
        browser = geckobrowsers[0];
    } else {
        for(i = 0; i < geckobrowsers.length; i++){
            if(geckobrowsers[i].indexOf("Chrome") == -1 && geckobrowsers[i].indexOf("Safari") == -1 && geckobrowsers[i].indexOf("Mobile") == -1 && geckobrowsers[i].indexOf("Version") == -1)browser = geckobrowsers[i];
        }
    }
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Gecko/") != -1){
    browser = agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).substring(0, agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).indexOf("/"));
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Clecko/") != -1){
    browser = agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).substring(0, agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).indexOf("/"));
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0"){
    browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(";"));
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 == agent.length-1){
    browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ")[agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ").length-1];
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 != agent.length-1){
    if(agent.substring(agent.indexOf(") ")+2).indexOf("/") != -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf("/"));
    if(agent.substring(agent.indexOf(") ")+2).indexOf("/") == -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf(" "));
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(0, 6) == "Opera/"){
    browser = "Opera";
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
    if(agent.substring(agent.indexOf("(")+1).indexOf(";") != -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(";"));
    if(agent.substring(agent.indexOf("(")+1).indexOf(";") == -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(")"));
} else if(agent.substring(0, agent.indexOf("/")) != "Mozilla" && agent.substring(0, agent.indexOf("/")) != "Opera"){
    browser = agent.substring(0, agent.indexOf("/"));
    browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else {
    browser = agent;
}
alert(browser + " v" + browserVersion);

【讨论】：

【解决方案9】：

我发现了一个纯 Javascript 解决方案 here，它似乎适用于 PC 和 Mac 的主要浏览器。我在两个平台的 BrowserStack 中测试了它，它就像一个梦一样工作。 Jason D'Souza 在此线程中发布的 Javascript 解决方案非常好，因为它为您提供了大量有关浏览器的信息，但它在识别 Edge 时遇到了问题，它看起来像 Chrome。他的代码可能会使用此解决方案进行一些修改，以使其也适用于 Edge。这是我找到的代码的sn-p：

var browser = (function (agent) {
    switch (true) {
        case agent.indexOf("edge") > -1: return "edge";
        case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
        case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
        case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
        case agent.indexOf("trident") > -1: return "ie";
        case agent.indexOf("firefox") > -1: return "firefox";
        case agent.indexOf("safari") > -1: return "safari";
        default: return "other";
    }
})(window.navigator.userAgent.toLowerCase());
console.log(window.navigator.userAgent.toLowerCase() + "\n" + browser);

更新

这是BSlink's answer 的一个更好的版本，它有一些问题。队列中的编辑太多，我无法在他的答案中提交一个，所以我正在编辑自己的答案以分享更正：

  const agent = window.navigator.userAgent.toLowerCase();
  const browser =
    agent.indexOf('edge') > -1 ? 'edge'
      : agent.indexOf('edg') > -1 ? 'chromium based edge'
      : agent.indexOf('opr') > -1 && window.opr ? 'opera'
      : agent.indexOf('chrome') > -1 && window.chrome ? 'chrome'
      : agent.indexOf('trident') > -1 ? 'ie'
      : agent.indexOf('firefox') > -1 ? 'firefox'
      : agent.indexOf('safari') > -1 ? 'safari'
      : 'other';
  
  console.log(`${agent}\n${browser}`);

【讨论】：

【解决方案10】：

基于is.js，您可以编写一个帮助文件来获取这样的浏览器名称-

const Browser = {};
const vendor = (navigator && navigator.vendor || '').toLowerCase();
const userAgent = (navigator && navigator.userAgent || '').toLowerCase();

Browser.getBrowserName = () => {
  if(isOpera()) return 'opera'; // Opera
  else if(isChrome()) return 'chrome'; // Chrome
  else if(isFirefox()) return 'firefox'; // Firefox
  else if(isSafari()) return 'safari'; // Safari
  else if(isInternetExplorer()) return 'ie'; // Internet Explorer
}


// Start Detecting browser helpers functions
function isOpera() {
  const isOpera = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
  return isOpera !== null;
}

function isChrome() {
  const isChrome = /google inc/.test(vendor) ? userAgent.match(/(?:chrome|crios)\/(\d+)/) : null;
  return isChrome !== null;
}

function isFirefox() {
  const isFirefox = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
  return isFirefox !== null;
}

function isSafari() {
  const isSafari = userAgent.match(/version\/(\d+).+?safari/);
  return isSafari !== null;
}

function isInternetExplorer() {
  const isInternetExplorer = userAgent.match(/(?:msie |trident.+?; rv:)(\d+)/);
  return isInternetExplorer !== null;
}
// End Detecting browser helpers functions

export default Browser;

只需将此文件导入您需要的位置。

import Browser from './Browser.js';

const userBrowserName = Browser.getBrowserName() // return your browser name
                                                 // opera | chrome | firefox | safari | ie

【讨论】：

【解决方案11】：

我喜欢Sintrias's answer，但我想用更现代的语法更新一点。

  const { userAgent } = window.navigator;
  const browser =
    userAgent.indexOf('edge') > -1 ? 'edge'
      : userAgent.indexOf('edg') > -1 ? 'chromium based edge'
      : userAgent.indexOf('opr') > -1 && !!window.opr ? 'opera'
      : userAgent.indexOf('chrome') > -1 && !!window.chrome ? 'chrome'
      : userAgent.indexOf('trident') > -1 ? 'ie'
      : userAgent.indexOf('firefox') > -1 ? 'firefox'
      : userAgent.indexOf('safari') > -1 ? 'safari'
      : 'other';
  
  console.log(`${userAgent.toLowerCase()}\n${browser}`);

【讨论】：

我比我发布的更喜欢你的语法，但这有一个问题。您需要获取userAgent 的.toLowerCase()，因为该字符串包含大写字母。现在运行您的代码将始终导致'other'。另外，我很好奇你为什么要使用双重否定，!!。除非我不知道某些特殊用例，否则不需要这些。