Búsqueda de sitios web

javascript - ¿Cómo averiguar si el navegador del usuario es Chrome?

Necesito alguna función que devuelva un valor booleano para comprobar si el navegador es Chrome.

¿Cómo puedo crear esa funcionalidad?

Respuesta #1

Para verificar si el navegador es Google Chrome, prueba esto (actualizado 18/7/2024):

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition

var winNav = window.navigator;
var vendorName = winNav.vendor;

var isChromium = window.chrome;
var isOpera = typeof window.opr !== "undefined";
var isFirefox = winNav.userAgent.indexOf("Firefox") > -1;
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
var isGoogleChrome = isChromium !== null
    && typeof isChromium !== "undefined"
    && vendorName === "Google Inc."
    && isOpera === false
    && isIEedge === false
    && (typeof winNav.userAgentData === "undefined" || winNav.userAgentData.brands.some(x => x.brand === "Google Chrome"));

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(isGoogleChrome) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

Ejemplo de uso: https://codepen.io/jonathan/pen/RwQXZxJ?editors=1111

La razón por la que esto funciona es porque si usas el inspector de Google Chrome y vas a la pestaña de consola. Escribe 'window' y presiona enter. Entonces podrás ver las propiedades del DOM para el 'objeto window'. Cuando colapsas el objeto, puedes ver todas las propiedades, incluyendo la propiedad 'chrome'.

Ya no puedes usar estrictamente igual a true para verificar en IE window.chrome. IE solía devolver undefined, ahora devuelve true. Pero adivina qué, IE11 ahora vuelve a devolver undefined. IE11 también devuelve una cadena vacía "" para window.navigator.vendor.

ACTUALIZACIÓN:

Gracias a Halcyon991 por señalar abajo que la nueva Opera 18+ también devuelve true para window.chrome. Parece que Opera 18 está basada en Chromium 31. Así que añadí una verificación para asegurarme de que window.navigator.vendor sea: "Google Inc" y no sea "Opera Software ASA". También gracias a Ring y Adrien Be por advertir sobre que Chrome 33 ya no devuelve true... window.chrome ahora verifica si no es nulo. Pero presten mucha atención a IE11, volví a añadir la verificación de undefined ya que IE11 ahora devuelve undefined, como lo hacía cuando se lanzó por primera vez... luego después de algunas actualizaciones de compilación devolvía true... ahora la compilación de actualización reciente está devolviendo undefined nuevamente. ¡Microsoft no puede decidir!

ACTUALIZACIÓN 24/7/2015 - adición para la verificación de Opera

Opera 30 acaba de ser lanzado. Ya no devuelve window.opera. Y además window.chrome devuelve true en el nuevo Opera 30. Por lo tanto, debes verificar si OPR está en el userAgent. Actualicé mi condición arriba para tener en cuenta este nuevo cambio en Opera 30, ya que utiliza el mismo motor de renderizado que Google Chrome.

ACTUALIZACIÓN 13/10/2015 - adición para la verificación de IE

Se añadió una verificación para IE Edge debido a que devuelve true para window.chrome… aunque IE11 devuelve undefined para window.chrome. ¡Gracias a artfulhacker por informarnos sobre esto!

ACTUALIZACIÓN 5/2/2016 - adición para la verificación de Chrome en iOS

Se agregó una verificación para Chrome en iOS CriOS debido a que este devuelve true para Chrome en iOS. ¡Gracias a xinthose por informarnos sobre esto!

ACTUALIZACIÓN 18/4/2018 - cambio para la verificación en Opera

Comprobación editada para Opera, verificando que window.opr no sea undefined ya que ahora Chrome 66 tiene OPR en window.navigator.vendor. ¡Gracias a Frosty Z y Daniel Wallman por informarlo!

ACTUALIZACIÓN 10/6/2024 - cambio para la verificación de la marca del navegador Google Chrome

Se agregó una verificación adicional para si es Google Chrome, ya que Google agregó la matriz window.navigator.userAgentData.brands en useragent

ACTUALIZACIÓN 18/7/2024 - cambio para la verificación de la marca del navegador Google Chrome

Modificado si la verificación de Google Chrome (isGoogleChrome) para tener en cuenta el cambio en el array de marcas de userAgentData y si userAgentData no existe en navegadores que no sean Google Chrome, para que no se active undefined. También se agregó la verificación de no Firefox.

ACTUALIZACIÓN 19/11/2024 - Cambio en la gama de marcas del navegador Google Chrome

Para la variable isGoogleChrome... Google Chrome Versión 131.0.6778.70, cambió la comprobación del array brands[] de nuevo a 0. Gracias [Morco][8] por informarme.

[8]" https://stackoverflow.com/users/25327560/morco

Respuesta #2

Actualización: Por favor, consulte la respuesta de Jonathan para obtener una forma actualizada de manejar esto. La respuesta a continuación aún puede funcionar, pero probablemente podría generar algunos falsos positivos en otros navegadores.

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

Sin embargo, como se mencionó, los agentes de usuario pueden ser falsificados, por lo que siempre es mejor utilizar la detección de características (por ejemplo, Modernizer) al manejar estos problemas, como mencionan otras respuestas.

Respuesta #3

Si quieres detectar el motor de renderizado de Chrome (así que no características específicas en Google Chrome o Chromium), una opción simple es:

var isChrome = !!window.chrome;

NOTA: esto también devuelve true para muchas versiones de Edge, Opera, etc., que están basadas en Chrome (gracias a @Carrm por señalarlo). Evitar eso es una batalla continua (ver window.opr más abajo), así que deberías preguntarte si estás intentando detectar el motor de renderizado (usado por casi todos los navegadores modernos importantes en 2020) o alguna otra característica específica de Chrome (¿o Chromium?).

Y probablemente puedas omitir !!

Respuesta #4

aún más corto: var is_chrome=/chrome/i.test( navigator.userAgent );

Respuesta #5

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

Respuesta #6

A partir de Chrome 89 (marzo de 2021), todas las respuestas anteriores son obsoletas. Chrome ahora admite User Agent Hints. Por lo tanto, ahora esto debe hacerse usando:

navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

O, si no estás usando Babel:

navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

Esto devuelve verdadero para Chrome 89 y superior, falso para las últimas versiones de Opera y Edge, y undefined para los navegadores que no soportan userAgentData.

Respuesta #7

var is_chrome=/chrome/.test( navigator.userAgent.toLowerCase() );~
Esta es una respuesta antigua, escrita hace más de 12 años; hasta ahora (es decir, agosto de 2022)

Actualización (agosto de 2022):

Hoy en día, la detección del navegador usando el agente de usuario (detección por agente de usuario) es generalmente una mala idea. La detección de funciones debería ser el camino a seguir.

Referencia: Detección del navegador usando el agente de usuario

Sin embargo, si aún deseas hacerlo, utiliza una biblioteca de terceros como

var parser = new UAParser();
var result = parser.getResult();

console.log(result.browser);// {name: "Chrome", version: "104.0.0.0", "major": "104"}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os);     // {name: "Windows", version: "10"}
console.log(result.engine); // {name: "Blink", version: "104.0.0.0"}
console.log(result.cpu);    // {"architecture": "amd64"}
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js">
</script>

El fragmento anterior utiliza la biblioteca ua-parser-js

  1. CDN - https://cdnjs.com/libraries/UAParser.js
  2. npm - https://www.npmjs.com/package/ua-parser-js

P.D.: Por favor, tenga en cuenta que el rastreo de UA es una mala práctica y utilice la detección de funciones siempre que sea posible.

Artículos relacionados