2012-04-20 123 views
9

我一直在玩不同的腳本,我發現一個適用於除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" />'); 
} 
+1

嗯,我知道這是不是你的問題的一部分(*也許*你有一個很好的理由這樣做),但你不應該寫CSS來定位瀏覽器,你應該定位功能...例如,Safari和Chrome應該不需要單獨的CSS。 http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ – potench 2012-04-20 18:12:31

+0

[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

回答

33

使用以下方法來檢測鉻:

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 
+0

好吧,這很好。我查看了該網站並閱讀了它,但由於某種原因,變量末尾的「-1」確實沒有成功。 – Jakob 2012-04-20 18:32:11

+1

.indexOf返回字符串(userAgent)中值(瀏覽器名稱)的位置。位置以0開始。如果未找到該值,則返回-1。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf – 2012-04-20 18:41:04

+8

'var is_chrome = !! window.chrome'是一種更好的檢測方法,因爲用戶代理可能被欺騙。 – GillesC 2014-07-29 13:56:46

-1
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; 
} 
+0

不明白爲什麼在第二行再次使用navigator.userAgent.toLowerCase()因爲你已經宣佈它爲userAgent上面;)很好的答案,雖然 – Rrjrjtlokrthjji 2012-04-20 18:54:52

+0

可能複製粘貼上面的值而不是鍵入 – nkvnkv 2012-09-10 03:34:19

1

這裏有兩個簡單的方法,一個使用的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瀏覽器時使用或不使用這兩個布爾函數後,您可以在更改樣式表時實現您的方法。

1

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對此事

+0

Chrome for iOS只是Safari,不要混淆二者。 – 2016-09-14 17:09:08