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

问题描述：

我一直在玩不同的脚本，我发现一个适用于除Chrome之外的所有东西...这是我一直用来在.CSS文件中有所不同的代码。我试图将浏览器名称变成“Chrome”，但这没有奏效。使用Javascript来检测谷歌浏览器切换CSS

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。 http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ – potench 2012-04-20 18:12:31

[JavaScript：如何确定用户浏览器是否为Chrome？]（https：// stackoverflow。 com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome） – zypA13510 2017-12-01 02:32:38

答

使用以下方法来检测铬：

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);

您可以包括一个css文件专门为这样的镀铬：

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

更新（2014年7月29日）：

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

var isChrome = !!window.chrome

好吧，这很好。我查看了该网站并阅读了它，但由于某种原因，变量末尾的“-1”确实没有成功。 – Jakob 2012-04-20 18:32:11

.indexOf返回字符串（userAgent）中值（浏览器名称）的位置。位置以0开始。如果未找到该值，则返回-1。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf – 2012-04-20 18:41:04

'var is_chrome = !! window.chrome'是一种更好的检测方法，因为用户代理可能被欺骗。 – GillesC 2014-07-29 13:56:46

答

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上面;）很好的答案，虽然 – Rrjrjtlokrthjji 2012-04-20 18:54:52

可能复制粘贴上面的值而不是键入 – nkvnkv 2012-09-10 03:34:19

答

这里有两个简单的方法，一个使用的indexOf和一个使用测试：

// 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浏览器时使用或不使用这两个布尔函数后，您可以在更改样式表时实现您的方法。

答

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，不要混淆二者。 – 2016-09-14 17:09:08

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

相关推荐