使用Javascript检测谷歌浏览器切换CSS

Posted 2023-02-21

【中文标题】使用Javascript检测谷歌浏览器切换CSS

【英文标题】：Using Javascript to detect Google Chrome to switch CSS

【发布时间】：2012-05-02 07:54:28

【问题描述】：

我一直在使用不同的脚本，我发现一个适用于除 Chrome 之外的所有脚本...这是我在 .CSS 文件中用来区分的代码。我尝试将浏览器名称改为“Chrome”，但这不起作用。

if (browser == 'Firefox') 
    document.write('<link rel="stylesheet" href="../component/fireFoxdefault.css" />');

if (browser == 'Safari') 
    document.write('<'+'link rel="stylesheet" href="../component/default.css" />');

【问题讨论】：

嗯，我知道这不是你的问题的一部分（也许你有这样做的充分理由），但你不应该编写 CSS 来定位浏览器，您应该针对功能...例如，Safari 和 Chrome 绝对不需要单独的 CSS。 paulirish.com/2008/…

javascript: How to find out if the user browser is Chrome?的可能重复

【参考方案1】：

使用以下方法检测 chrome：

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

来源：http://davidwalsh.name/detecting-google-chrome-javascript

更新（2015-07-20）：

上述解决方案并不总是有效。在this answer 中可以找到更可靠的解决方案（见下文）。话虽如此，我会avoid browser detection and go with feature detection instead：

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

您可以像这样包含专门用于 chrome 的 css 文件：

if (isChrome) 
    document.write('<'+'link rel="stylesheet" href="../component/chromeDefault.css" />');

更新（2014-07-29）：

@gillesc 有一个更优雅的检测 Chrome 的建议，他在下面的评论中发布了该建议，也可以在 question 上查看。

var isChrome = !!window.chrome

【讨论】：

好吧，效果很好。我查看了那个网站并阅读了它，但由于某种原因，变量末尾的“-1”确实没有实现。

.indexOf 返回值（浏览器名称）在字符串 (userAgent) 中的位置。位置从 0 开始。如果未找到该值，则返回 -1。 developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

var is_chrome = !!window.chrome 是一种更好的检测方法，因为用户代理可以被欺骗。

@gillesc 谢谢！我已将其包含在答案中。

我发现通过用户代理进行 chrome 检测并不可靠。例如，Linux 上的 Opera 27 在用户代理字符串中也包含“chrome”。

【参考方案2】：

var userAgent = navigator.userAgent.toLowerCase(); 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

// Is this a version of Chrome?
if($.browser.chrome)
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;


// Is this a version of Safari?
if($.browser.safari)
  userAgent = userAgent.substring(userAgent.indexOf('safari/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;

【讨论】：

不明白为什么在第二行中您再次使用 navigator.userAgent.toLowerCase() ，因为您已经将其声明为上面的 userAgent ;) 不错的答案

可能复制粘贴到上面的值而不是输入

【参考方案3】：

这里有两种简单的方法，一种使用 indexOf ，一种使用 test ：

// first method 
function check_chrome_ua() 
    var ua = navigator.userAgent.toLowerCase();
    var is_chrome = /chrome/.test(ua);

    return is_chrome;


// second method */
function check_chrome_ua2() 
    var ua = navigator.userAgent.toLowerCase();
    var is_chrome = ua.indexOf("applewebkit/") != -1 && ua.indexOf("khtml") > - 1;

    return is_chrome;


alert(check_chrome_ua()); // false or true 
alert(check_chrome_ua2()); // false or true

使用这两个布尔函数之一检查 chrome 是否正在使用后，您可以实现更改样式表的方法。

【参考方案4】：

iOS 上的 Chrome 更新：Chrome 38（在 ios 8.1 上测试）在 !!window.chrome 上返回 false。要解决此问题，您可以使用：

function isChrome()
    var windowChrome = !!window.chrome;
    if(!windowChrome)
        // Chrome iOS specific test
        var pattern = /crios/i;
        return pattern.test(window.navigator.userAgent);
    else
        return windowChrome;
    

关于此事的谷歌reference

【讨论】：

Chrome for iOS 就是 Safari，不要混淆两者。