Използване на Javascript за откриване на Google Chrome за превключване на CSS

Играх си с различни скриптове, намерих един, който работи за всичко, освен за Chrome... това е кодът, който използвах, за да се различавам в .CSS файлове. Опитах просто да превърна името на браузъра в „Chrome“, но това не проработи.

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

javascript google-chrome css browser-detection
person Jakob    schedule 20.04.2012    source източник
comment
Хм, знам, че това не е част от въпроса ви (и може би имате основателна причина да направите това), но не трябва да пишете CSS, за да насочвате към браузър, трябва да насочвате към функции... например Safari и Chrome определено не трябва да изискват отделен CSS. paulirish.com/2008/   -  person potench    schedule 20.04.2012
comment
Възможен дубликат на JavaScript: Как да разберете дали потребителският браузър е Chrome?   -  person user5532169    schedule 01.12.2017

Отговори (4)


arrow_upward
36
arrow_downward

Използвайте следното, за да откриете хром:

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

Източник: http://davidwalsh.name/detecting-google-chrome-javascript

Актуализация (20.07.2015):

Горното решение не винаги работи. По-надеждно решение може да бъде намерено в този отговор (вижте по-долу). Като се има предвид това, бих избягвал откриването на браузъра и вместо това бих използвал откриването на функции:

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

Можете да включите css файл специално за chrome по този начин:

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

АКТУАЛИЗАЦИЯ (2014-07-29):

@gillesc има по-елегантно предложение за откриване на Chrome, което той публикува в коментар по-долу и може да се види и на този въпрос.

var isChrome = !!window.chrome
person T. Junghans    schedule 20.04.2012
comment
Добре, че се получи добре. Разгледах този уебсайт и го прочетох, но наистина не се получи, тъй като по някаква причина с -1 в края на променливата. - person Jakob; 20.04.2012
comment
.indexOf връща позицията на стойността (име на браузър) в низа (userAgent). Позицията започва с 0. -1 се връща, ако стойността не е намерена. developer.mozilla.org/en/JavaScript/Reference/Global_Objects/ - person T. Junghans; 20.04.2012
comment
var is_chrome = !!window.chrome е по-добър метод за откриване, тъй като потребителският агент може да бъде подправен. - person GillesC; 29.07.2014
comment
@gillesc благодаря! Включих това в отговора. - person T. Junghans; 29.07.2014
comment
Открих, че откриването на хром чрез потребителски агент не е надеждно. Например Opera 27 на linux включва и chrome в низа на потребителския агент. - person reallynice; 10.02.2015
comment
Горното решение не дава правилни резултати за някои браузъри. Вижте тази връзка stackoverflow.com/questions/5125438/ поради причината зад неправилния резултат. Тази връзка stackoverflow. com/questions/12625876/ дава правилния отговор - person shrawan_lakhe; 19.07.2015
comment
@shrawan_lakhe благодаря за връзките, включих втората в отговора си по-горе - person T. Junghans; 20.07.2015
comment
TIL, някои версии на Edge дефинират window.chrome, така че проверката на доставчика все още е необходима - person Hunter McMillen; 28.03.2017

arrow_upward
1
arrow_downward

Ето два прости метода, един използващ 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 се използва или не с една от тези две булеви функции, можете да приложите своя метод за промяна на листа със стилове.

person Rrjrjtlokrthjji    schedule 20.04.2012

arrow_upward
1
arrow_downward

Актуализация за Chrome на iOS: Chrome 38 (тестван на iOS 8.1) връща false на !!window.chrome. За да коригирате това, можете да използвате:

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

Google справка по въпроса

person Arnaud Leyder    schedule 26.11.2014
comment
Chrome за iOS е просто Safari, не ги бъркайте. - person fregante; 14.09.2016

arrow_upward

arrow_downward

person    schedule
comment
не разбирам защо във втория ред използвате отново navigator.userAgent.toLowerCase(), тъй като вече сте го декларирали като userAgent по-горе;) Хубав отговор обаче - person Rrjrjtlokrthjji; 20.04.2012
comment
вероятно копирайте поставената горна стойност, вместо да пишете - person nkvnkv; 10.09.2012