【问题标题】:JavaScript: How to find out if the user browser is Chrome?JavaScript:如何判断用户浏览器是否为 Chrome?
【发布时间】:2011-06-01 16:41:19
【问题描述】:

我需要一些返回布尔值的函数来检查浏览器是否为Chrome

如何创建这样的功能?

【问题讨论】:

  • 你确定不想做特征检测(而不是问“这是 Chrome 吗?”问“这可以做我需要的吗?”)
  • 阿门,检测特定浏览器正是我们遇到的问题,即站点拒绝与 IE 和 Netscape 以外的任何其他浏览器一起工作,即使其他浏览器完全能够正确呈现它们。能力检测是更安全、与未来兼容的前进方向。
  • 谁知道?他可能想让用户下载一个 chrome 扩展
  • 我同意特征检测是要走的路。但是有一些你想检测的合法区域。例如我只想为 chrome 修补 xhr.sendAsBinary 。我最初的解决方案检查了是否实现了 filereader.readasbinary。但是,我也遇到了为某些移动浏览器打补丁的问题,因此上传失败。我只希望这个修复适用于 chrome。
  • 想知道为什么知道浏览器是否是 Chrome 可能相关? Chrome 无法加载 RSS 提要怎么办?因此,您可以实际提供警告或重定向用户,而不是链接到无法在 Chrome 中加载的 RSS 提要?不用感谢您的 Google Chrome...

标签: javascript html google-chrome browser-detection


【解决方案1】:

要检查浏览器是否为 Google Chrome,请尝试以下操作:

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

使用示例:http://codepen.io/jonathan/pen/WpQELR

之所以有效,是因为如果您使用 Google Chrome 检查器并转到控制台选项卡。键入“窗口”并按 Enter。然后您可以查看“窗口对象”的 DOM 属性。折叠对象时,您可以查看所有属性,包括“chrome”属性。

您不能再使用严格等于 true 在 IE 中检查 window.chrome。 IE 以前返回undefined,现在返回true但你猜怎么着,IE11 现在又返回 undefined。 IE11 还为 window.navigator.vendor 返回一个空字符串 ""

我希望这会有所帮助!

更新:

感谢Halcyon991 在下方指出,新的 Opera 18+ 也为window.chrome 输出为真。 Opera 18 似乎基于 Chromium 31。所以我添加了一个检查以确保window.navigator.vendor 是:"Google Inc" 而不是"Opera Software ASA"。还要感谢 RingAdrien Be 关于 Chrome 33 不再返回 true 的提醒……window.chrome 现在检查是否不为空。但是请密切注意 IE11,我添加了对 undefined 的检查,因为 IE11 现在输出 undefined,就像它第一次发布时一样。然后在一些更新构建后它输出到 true ..现在最近的更新构建是再次输出undefined。微软拿不定主意!

更新 2015 年 7 月 24 日 - 添加 Opera 检查

Opera 30 刚刚发布。它不再输出window.opera。并且window.chrome 在新的 Opera 30 中输出为 true。所以您必须检查 OPR 是否在 userAgent 中。我更新了上面的条件以说明 Opera 30 中的这一新变化,因为它使用与 Google Chrome 相同的渲染引擎。

更新 2015 年 10 月 13 日 - 添加 IE 检查

添加了对 IE Edge 的检查,因为它为 window.chrome 输出 true .. 即使 IE11 为 window.chrome 输出 undefined。感谢artfulhacker 让我们知道这件事!

更新 2016 年 2 月 5 日 - 添加 iOS Chrome 检查

添加了对 iOS Chrome 检查 CriOS 的检查,因为它在 iOS 上为 Chrome 输出 true。感谢xinthose 让我们知道这件事!

更新 2018 年 4 月 18 日 - Opera 检查更改

已编辑 Opera 检查,检查 window.opr 不是 undefined,因为现在 Chrome 66 在 window.navigator.vendor 中有 OPR。感谢Frosty ZDaniel Wallman 报告此事!

【讨论】:

  • var isGoogleChrome = window.chrome != null && window.navigator.vendor === "Google Inc.";
  • 谢谢@xinthose .. 我刚刚添加了一个 IOS Chrome 的检查 .. 非常感谢! :)
  • 这里的问题可能与 Daniel Wallman 相同:我的 Android Chrome 用户代理包含“OPR”字符串! Mozilla/5.0 (Linux; Android 8.0.0; ASUS_Z012D Build/OPR1.170623.026) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36,因此 isChrome() 返回 false
  • 感谢@FrostyZ 和@DanielWallman 让我们知道。我修复了它,所以 Opera 检查 window.opr 不是 undefined
  • 最新的 Edge 用户代理值实际上是 Edg 而不是 Edge(另请参阅这些文档:docs.microsoft.com/en-us/microsoft-edge/web-platform/…)。所以也许这一行:inNav.userAgent.indexOf("Edge") 应该改为inNav.userAgent.indexOf("Edg")
【解决方案2】:

更新:请参阅Jonathan's answer 了解处理此问题的更新方法。下面的答案可能仍然有效,但可能会在其他浏览器中引发一些误报。

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

但是,如上所述,用户代理可能会被欺骗,因此在处理这些问题时,最好使用特征检测(例如 Modernizer),正如其他答案所提到的那样。

【讨论】:

  • @Serg 因为他们没有 Chrome。它只是 iOS Safari 的一个皮肤。
  • 谢谢,虽然你的变量名应该是 camelCase
  • 在 Microsoft Edge 中返回 true
  • 由于很多浏览器在此返回true,这是我使用的排除Edge、Maxthon、iOS safari ...等的代码var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
  • Opera(至少版本 42)返回 Google Incnavigator.vendor,所以这种方法不是防弹的,像 /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent) 这样的方法可能会更好
【解决方案3】:

更短:var is_chrome = /chrome/i.test( navigator.userAgent );

【讨论】:

  • 在 Microsoft Edge 中返回 true
【解决方案4】:

如果您想检测 Chrome 的渲染引擎(因此不是 Google Chrome 或 Chromium 中的特定功能),一个简单的选项是:

var isChrome = !!window.chrome;

注意:对于许多基于 Chrome 的 Edge、Opera 等版本,这也会返回 true(感谢 @Carrm 指出这一点)。 避免这种情况是一场持续的战斗(请参阅window.opr 下面)所以您应该问问自己,您是在尝试检测渲染引擎(2020 年几乎所有主要现代浏览器都使用)还是其他一些 Chrome(或 Chromium?)特定功能。

还有you can probably skip !!

【讨论】:

  • Opera 实际上将true 返回到window.chrome。查看具有防弹检测 + 修复功能的 conditionizr.com。
  • 好吧,Opera 基本上是 Chrome
  • 我就是不明白为什么要两次!! , 你可以直接使用, if(chrome){ }
  • @vishalsharma,!! 将值转换为truefalsetypeof(window.chrome) 给出"object",而typeof(!!window.chrome) 给出"boolean"。您的代码示例也可以工作,因为 if 语句会进行转换。
  • 这也为 Edge 返回 true
【解决方案5】:

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

【讨论】:

  • 不幸的是,navigator.vendor === "Google Inc."在 Opera(至少 v.49)上,因此使用您的代码 Opera 显示为 Chrome。
  • 在世界某个地方,每一个我们实际上不需要的正则表达式都会导致一只小猫死去。
  • 没有解释,没有关于误报/负数的指示,只是在这里转储了一段代码......这个响应真的应该被否决。它甚至不是所提问题的答案。
  • 不幸的是,Edge 上的navigator.vendor === "Google Inc." 也是如此(至少 v.89),因此使用您的代码 Edge 也显示为 Chrome,isEdge 变为 false(基于 Chromium 的 Edge 浏览器的用户代理为 @987654324 @)。
【解决方案6】:

从 Chrome 89(2021 年 3 月)开始,所有早期答案都已过时。 Chrome 现在支持User Agent Hints。所以现在应该使用:

navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

或者,如果你不使用 Babel:

navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

对于 Chrome 89 及更高版本返回 true,对于最新的 Opera 和 Edge 返回 false,对于不支持 userAgentData 的浏览器返回 undefined。

【讨论】:

    【解决方案7】:
    var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
    

    【讨论】:

    • 我喜欢这个,记住你也可以这样做 var is_chrome = /chrome/i.test(navigator.userAgent);太
    • 在 Microsoft Edge 中返回 true
    • @Cobby:恕我直言,Edge 当时还没有发布。感谢您的信息:)
    【解决方案8】:

    你可以使用:

    navigator.userAgent.indexOf("Chrome") != -1
    

    它正在 v.71 上运行

    【讨论】:

    • navigator.userAgent.includes("Chrome")
    • 请注意,这将在 Edge Chromium 和 Google Chrome 上返回 true。对于我的用例来说,这是一个积极的结果,但 OP 可能只针对 Google Chrome。
    【解决方案9】:

    如果您有勇气,可以尝试浏览器嗅探并获得一个版本:

    var ua = navigator.userAgent;
    if(/chrome/i.test(ua)) {
        var uaArray = ua.split(' ')
        ,   version = uaArray[uaArray.length - 2].substr(7);
    }
    

    检测到的这个版本可能是 Chrome 版本、Edge 版本或其他版本。浏览器插件可以很容易地改变 userAgent 和 platform 等东西,所以不推荐这样做。

    向 The Big Lebowski 道歉,因为他在我的回答中使用了他的答案。

    【讨论】:

    • Microsoft Edge 中的版本为 "537.36"
    【解决方案10】:

    检查浏览器是否为谷歌浏览器:

    var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc");
    
    console.log(navigator.vendor);
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 "
    
    console.log(navigator.userAgent); 
    // "Google Inc."
    

    【讨论】:

      【解决方案11】:

      在进行浏览器检测时可以使用一些可选的窗口属性。其中一个是可选的chrome 属性(Chromium),另一个是可选的opr 属性(Opera)。

      如果浏览器在 Window 对象上具有可选的 chrome 属性,则表示该浏览器是 Chromium 浏览器。以前这在大多数情况下意味着 Chrome,但现在许多浏览器都是基于 Chromium 构建的(包括 Edge 和 Opera),因此仅检查属性的存在无助于专门检测 Chrome 浏览器。

      然后通常会有多个用户代理用于不同的浏览器版本(Edg 或 Edge)或操作系统(EdgiOS、ChriOS 和 FxiOS)。

      我使用以下逻辑并针对很多案例(常见的用户代理)进行了测试:

      const GOOGLE_VENDOR_NAME = 'Google Inc.';
      
      function isOpera(){
        return Boolean(window.opr);
      }
      
      function isChromium() {
        return Boolean(window.chrome);
      }
      
      function getBrowserName() {
        const userAgent = window.navigator.userAgent;
        const vendor = window.navigator.vendor;
        switch (true) {
          case /Edge|Edg|EdgiOS/.test(userAgent):
            return 'Edge';
          case /OPR|Opera/.test(userAgent) && isOpera():
            return 'Opera';
          case /CriOS/.test(userAgent):
          case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
            return 'Chrome';
          case /Vivaldi/.test(userAgent):
            return 'Vivaldi';
          case /YaBrowser/.test(userAgent):
            return 'Yandex';
          case /Firefox|FxiOS/.test(userAgent):
            return 'Firefox';
          case /Safari/.test(userAgent):
            return 'Safari';
          case /MSIE|Trident/.test(userAgent):
            return 'Internet Explorer';
          default:
            return 'Unknown';
        }
      }
      
      function isChrome() {
        const name = getBrowserName();
        return name === 'Chrome';
      }
      

      你可以在this fiddle找到这个简化的代码:

      诀窍是先针对其他浏览器进行测试,然后再针对 Chrome(Edge、Opera)进行测试。在交换机的所有这些情况下,浏览器的不同可能标识符组合在一个正则表达式中,并针对用户代理字符串进行测试。对于 Chrome 和 Opera,添加了对 window 属性的额外测试,对于 Chrome,我们还检查供应商名称是否与预期值匹配。


      注意: 我针对许多不同的用户代理进行了测试,但我不会在此声明此解决方案完美无缺。欢迎任何改进建议或浏览器检测失败,以便我进一步改进此代码。


      更新:

      修复了 iOS(用户代理 CriOS)检测 Chrome 的错误。 iOS 上的 Chrome 在 window 对象上没有 chrome: true 属性,因此只能测试用户代理字符串是否存在。

      【讨论】:

        【解决方案12】:

        用户可以更改用户代理。尝试在style 元素的style 对象中测试webkit 前缀属性

        if ("webkitAppearance" in document.body.style) {
          // do stuff
        }
        

        【讨论】:

        • 在 Firefox 中:(document.body.style 中的“webkitAnimation”)=== true
        • 仅供参考:“webkitAppearance”也不再有效。 Edge 现在正在使用它。可能最好删除您的答案。 ^^
        【解决方案13】:

        适用于我在 Mac 上的 Chrome 上。似乎比上述所有内容更简单或更可靠(以防用户代理字符串测试)。

                var isChrome = false;
                if (window.chrome && !window.opr){
                    isChrome = true;
                }
                console.log(isChrome);
        

        【讨论】:

        • const isChrome = window.chrome && !window.opr;
        • 我猜,这个答案被 oneliners 爱好者否决了。尽管如此,我理解你的热情,但我认为你不应该仅仅基于它就对一个完全正确的答案投反对票。
        【解决方案14】:

        了解不同桌面浏览器的名称(Firefox、IE、Opera、Edge、Chrome)。 Safari除外。

        function getBrowserName() {
          var browserName = '';
          var userAgent = navigator.userAgent;
          (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
          ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
          (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
          (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
          (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');
        
          /**
           * Expected returns
           * Firefox, Opera, Edge, Chrome
           */
          return browserName;
        }
        

        适用于以下浏览器版本:

        Opera - 58.0.3135.79
        Firefox - 65.0.2 (64-bit)
        IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
        Edge - 44.17763.1.0
        Chrome - 72.0.3626.121 (Official Build) (64-bit)
        

        查看要点here 和小提琴here

        原始代码 sn-p 不再适用于 Chrome,我忘记了在哪里找到它。它之前有 safari,但我无法再访问 safari,所以我无法再验证。

        只有 Firefox 和 IE 代码是原始 sn-p 的一部分。

        对 Opera、Edge 和 Chrome 的检查非常简单。他们在 userAgent 上有区别。 OPR 仅存在于 Opera 中。 Edge 仅存在于 Edge 中。因此,要检查 Chrome,这些字符串不应该存在。

        至于 Firefox 和 IE,我无法解释它们的作用。

        我会将此功能添加到package i'm writing

        【讨论】:

          【解决方案15】:

          我找到的最佳解决方案是:

          var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)
          

          使用.indexOf 代替.includes 使其更兼容浏览器。 即使(或因为)重点是使您的代码特定于浏览器,您仍需要该条件才能在大多数(或所有)浏览器中工作。

          【讨论】:

          【解决方案16】:

          检查这个:How to detect Safari, Chrome, IE, Firefox and Opera browser?

          在你的情况下:

          var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;
          

          【讨论】:

          • 在浏览器或 PWA 中均不适用于 Android 版 Chrome。检查开发控制台显示 window.chrome 是 {loadTimes: ƒ, csi: ƒ}
          【解决方案17】:
          var is_chrome = browseris.chrome
          

          或查看其他浏览器:

          browseris.firefox
          browseris.ie
          browseris.safari
          

          你也可以查看browseris.chrome7up等版本。

          检查“browseris”对象中的所有现有信息

          【讨论】:

            【解决方案18】:

            所有答案都是错误的。 “Opera”和“Chrome”在所有情况下都是相同的。

            (编辑部分)

            这是正确的答案

            if (window.chrome && window.chrome.webstore) {
                // this is Chrome
            }
            

            【讨论】:

            • 评论胜于回答。
            • 如果你想知道为什么你被改装了,这根本不是真的。例如,它们处理键盘快捷键和访问键修饰符的方式不同(而且这些也无法被特征检测到)。
            • 我并不是说“opera”和“chrome”是同一个浏览器,只是图标不同。我说上述方法对两种浏览器都给出了相同的结果。
            • @Zilk 你测试过例如第一个有 66 票赞成的答案吗?
            • 从 chrome 71 开始,这将不再有效。window.chrome.webstore 现在是 undefined
            猜你喜欢
            • 1970-01-01
            • 2013-02-09
            • 2016-12-05
            • 2011-01-01
            • 1970-01-01
            • 2012-04-28
            • 2012-11-26
            • 2012-06-25
            相关资源
            最近更新 更多