Detecção de navegador com JavaScript

Se você realmente precisa fazer isso, detectar qual navegador alguém está usando para acessar seu site é fácil com JavaScript.

JavaScript tem um objeto padrão chamado navigatorque contém dados sobre o navegador que está sendo usado.

O navigatorobjeto tem muitas propriedades, mas a .userAgentpropriedade, uma string que contém dados sobre o navegador, sistema operacional e mais, é tudo o que precisamos.

Se quiséssemos mostrar o valor de navigator.userAgent, poderíamos fazer um dos seguintes:

Alerta

// Exibe em uma caixa de alerta

alert(navigator.userAgent);

Valor de navigator.userAgent no Firefox 30 no Windows 7

Document.write

// Escreve no documento HTML

document.write(navigator.userAgent);

console.log()

// Exibe na ferramenta de desenvolvedor do navegador

// Isso é o ideal

// Use console.log() quando estiver desenvolvendo/experimentando JavaScript

console.log(navigator.userAgent);

Se eu estivesse usando o Internet Explorer 11 no Windows 7, a saída seria:

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; . NET4.0E; rv:11.0) como Gecko

Como você pode ver, o problema navigator.userAgenté que é uma string gigante, e também não é muito legível por humanos.

Portanto, se eu quiser trabalhar com as informações ou mostrá-las ao usuário, precisarei analisar a string primeiro.

O problema é que sou extremamente e embaraçosamente incompetente em regex (entre muitas outras coisas), então fico feliz que a biblioteca JavaScript Detect.js de Darcy Clarke exista.

Detect.js será capaz de analisar o valor da string em um objeto JavaScript legível e operável.

Para exibir o nome do navegador, a versão do navegador e o sistema operacional em nosso console, é assim que poderíamos fazer:

// Cria um objeto ‘usuário’ que conterá coisas do Detect.js

// Chama detect.parse() com navigator.userAgent como argumento

var usuário = detect.parse(navigator.userAgent);

// Exibe alguns valores de propriedade no console de ferramentas de desenvolvimento do meu navegador

console.log(

 usuário.navegador.família

 usuário.navegador.versão

 user.os.name

);

No Firebug , isso é o que vou ver:

Firefox 30 Windows 7

E é isso que vou ver no Chrome DevTools usando a mesma máquina:

Chrome 35 Windows 7

Para direcionar um navegador específico, você pode usar instruções condicionais.

Por exemplo, se você deseja segmentar apenas o Safari para desktop, você pode fazer isso:

if (user.browser.family === ‘Safari’) {

 alert(‘Você está usando o navegador Safari’);

}

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *