Uso de Javascript para detectar Google Chrome para cambiar CSS

He estado jugando con diferentes scripts, encontré uno que funciona para todo menos para Chrome ... este es el código que he usado para diferir en archivos .CSS. Intenté simplemente poner el nombre del navegador en "Chrome" Pero eso no funcionó.Uso de Javascript para detectar Google Chrome para cambiar 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" />'); 
}

Fuente

2012-04-20 Jakob

Hmm, sé que esto no es parte de su pregunta (y tal vez * * usted tiene una buena razón para hacer esto) pero no debe escribir CSS para orientar un navegador, debe orientar las características ... por ejemplo, Safari y Chrome definitivamente no deberían requerir CSS por separado. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ – potench

Posible duplicado de [JavaScript: ¿Cómo saber si el navegador del usuario es Chrome?] (https: // stackoverflow. com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome) – zypA13510

la siguiente manera para detectar cromo:

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

Fuente: http://davidwalsh.name/detecting-google-chrome-javascript

Actualización (07/20/2015):

La solución anterior no funciona siempre . Se puede encontrar una solución más confiable en this answer (ver a continuación). Dicho esto, lo haría avoid browser detection and go with feature detection instead:

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

Se puede incluir un archivo css específicamente para el cromo como esto:

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

ACTUALIZACIÓN (07/29/2014):

@ gillesc tiene una sugerencia más elegante para detectar Chrome que publicó en un comentario a continuación y también se puede ver en este question.

var isChrome = !!window.chrome

Fuente

2012-04-20 18:00:34

Bien, funcionó bien. Miré ese sitio web y lo leí, pero realmente no lo hice porque por alguna razón con el "-1" al final de la variable. – Jakob

.indexOf devuelve la posición del valor (nombre del navegador) en la cadena (userAgent). La posición comienza con 0. -1 se devuelve si no se encuentra el valor. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf –

'var is_chrome = !! window.chrome' es un mejor método de detección ya que el agente de usuario puede ser falsificado. – GillesC

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

Fuente

2012-04-20 18:11:13

No entiendo por qué en la segunda línea usa de nuevo navigator.userAgent.toLowerCase() ya que ya lo ha declarado como userAgent;) Buena respuesta, aunque – Rrjrjtlokrthjji

probablemente copiado pegado por encima del valor en lugar de escribir – nkvnkv

Aquí hay dos métodos sencillos, uno con indexOf y uno utilizando la prueba:

// 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

Después de comprobar si el cromo está en uso o no con una de estas dos funciones booleanas, que pueda implementa tu método para cambiar la hoja de estilos.

Fuente

2012-04-20 18:51:59 Rrjrjtlokrthjji

Actualización para Chrome en iOS: Chrome 38 (probado en iOS 8.1) devuelve falso en !!window.chrome. Para solucionar este problema, puede utilizar:

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 reference en la materia

Fuente

2014-11-26 16:06:36

Chrome para iOS es solo Safari, no confundas los dos. –

Uso de Javascript para detectar Google Chrome para cambiar CSS

Respuesta

Cuestiones relacionadas