Identificar navegadores utilizando JavaScript. Dica 25

Como identificar o navegador que o visitante do seu site está utilizando

O vídeo complementa o texto e o texto completa o vídeo, assista.

O próprio vídeo desta dica começa de uma maneira diferente, pois as propriedades apresentadas na documentação da W3C para fazer isso não funcionam como deveriam.

A propriedade appName e appCodeName retornam sempre os mesmo valores, Netscape e Mozilla respectivamente. Perguntando no grupo Desenvolvimento Web do Facebook (o maior com este nome) o primeiro comentário me indicava um artigo em inglês que era quase o que eu precisava.

Antes de dar continuidade se você só veio pelo código fonte que identifica o navegador que o usuário está utilizando, aqui está ele.

Agora posso continuar meu artigo sentindo-me em paz. Voltando ao nosso curso :) agora vou descrever o código fonte desse site que está em inglês e logo em seguida começar a explicar minhas edições.

No código fonte do site wp-mix.com o autor (Jeff Starr) cria uma variável para cada navegador, depois iguala (cada variável) ao objeto navigator com a propriedade userAgent buscando com indexOf o nome do navegador.

No código fonte deste site também tem um maior que menos um ( > -1 ), confesso que não entendi ao certo o porque disto, mas a busca por um dos navegadores não funciona se, todos não tiverem esse detalhe.

Para ver a resposta ele sugere um if com alert, o alert no exemplo que eu queria para esta dica pode ser ignorado, o mais importante é o if. Eu não postarei o código fonte deste site aqui por uma questão de respeito, o link para este artigo em inglês está no final deste artigo.

No vídeo eu mostro um exemplo da resposta das propriedades appName e appCodeName em três navegadores (Google Chrome, Mozilla Firefox e Epiphany), a seguir nós temos o código fonte HTML inicial.

<!DOCTYPE html>
<html>
    <head>
        <title>Qual navegador? JavaScript dica 25</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Qual navegador? JavaScript dica 25</h1>

        <h2 id="name"></h2>
        <h2 id="codename"></h2>

</body>
</html>
<script src="qual.js"></script>

No vídeo eu também tenho um código fonte JS inicial, teste eu seus navegadores, é legal conferir.

var q = "";
var w = "";

q = " Propriedade appName: " +navigator.appName;
document.getElementById("name").innerHTML = q;
w = " Propriedade appCodeName: " +navigator.appCodeName;
document.getElementById("codename").innerHTML = w;

Propriedade userAgent

No código fonte que está no site wp-mix.com ele utiliza a propriedade userAgent, e como ainda não expliquei nem citei ela, vejo um exemplo. Já vimos tudo o que está junto com a propriedade userAgent, caso tenha alguma dúvida de algo do próximo código fonte, por favor conferir a aba curso deste curso (as dicas anteriores).

var e = "";

e = " Propriedade userAgent: " +navigator.userAgent;
document.getElementById("info").innerHTML = e;

Estou citando um ID chamado info, então voltei no HTML e criei uma tag p com este nome de ID, lembrando, o ID pode ter o nome que você quiser.

A propriedade userAgent retorna um cabeçalho do navegador, com informações como nome, versão e S.O.

Agora sim podemos começar com o código fonte desta dica, e a primeira diferença entre o meu código fonte final e o código fonte do site wp-mix.com é que, para o que eu quero, preciso de apenas uma variável para todos os navegadores, e ele utilizou uma variável para cada navegador.

var navegadores = "";

Lembra que ele (Jeff Starr) utiliza if para ver a resposta, então, isso fica.

if () {

}else if () {

}

Voltando ao HTML pela última vez, criamos uma tag h2 com um id com nome qualquer, vamos escrever o nome do navegador nessa tag h2.

A lógica aqui é, em cada if, um navegador. Em outras palavras a condicional de cada if será nossa variável navegadores igual a busca por determinado navegador.

if (navegadores = navigator.userAgent.toLowerCase().indexOf('op') > -1) {
document.getElementById("browser").innerHTML = "Opera";
}

Se você leu até aqui já aviso que o vídeo está bem mais completo. O código fonte acima busca op, que segundo o código fonte do site wp-mix.com é Opera, eu não tenho Opera.

else if (navegadores = navigator.userAgent.indexOf('MSIE') > -1) {
document.getElementById("browser").innerHTML = "Internet Explorer ou Edge";
}else if (navegadores = navigator.userAgent.indexOf('Firefox') > -1) {
document.getElementById("browser").innerHTML = "Mozilla Firefox";
}

O código fonte acima busca por MSIE ou Firefox, se encontrar, a respostas será que a pessoa que está visitando o seu site está utilizando Internet Explorer ou Edge, ou, Mozilla Firefox".

else if (navegadores = navigator.userAgent.indexOf('Epiphany') > -1) {
    document.getElementById("browser").innerHTML = "Epiphany";
}else if (navegadores = navigator.userAgent.indexOf('Chrome') > -1) {
    document.getElementById("browser").innerHTML = "Google Chrome";
}else if (navegadores = navigator.userAgent.indexOf('Safari') > -1) {
    document.getElementById("browser").innerHTML = "Safari";
}

Agora temos algo interessante (NOVO). O Epiphany é o navegador padrão do Elementary OS, e ele tem algo em comum com o Google Chrome, ambos aparecem a palavra também Safari quando você utiliza a propriedade userAgent, e se você colocasse a condicional do Safari antes desses navegadores, nesses navegadores só iria aparecer Safari.

Este código fonte não acabou, no código fonte do Jeff ele também usa alguns if em separado.

if ((chrome) && (safari)) safari = false;
if ((chrome) && (opera)) chrome = false;
if ((safari) && (epiphany)) safari = false;

Na verdade ele utiliza dois deles, adicionei o do Epiphany durante o vídeo. Isso pode servir para evitar problemas com relação a busca.

Alias, Segundo esses ifs, quando chamar a propriedade useAgent no Opera, também aparecerá Chrome, igual no caso do Chrome e Epiphany aparece Safari. Por isso, já para evitar possíveis erros, eu deixei a condicional (if) do Opera, antes que o if do Google Chrome. Lembrando, eu não tenho Opera, isto é quase que uma suposição.

Eu testei aqui em três navegadores, quais navegadores você usa, tem algum navegador que eu não testei aqui?

Se sim, de preferência no YouTube, comente onde a condicional deste navegador tem que estar dentro dessa praticamente lista.

Código fonte JS completo.

Vai precisar criar mais desses ifs em separado, precisa mesmo dessas condicionais?

Se você utiliza um navegador que não está nem nesse código fonte, aí sim seria interessante comentar. Se puder mandar imagem da userAgent deste navegador que está aqui, pode mandar para a página do Em Busca do Código. Ficarei feliz em atualizar este código fonte.

Espero que você tenha gostado desta dica e leitura, e até mais. Observação, agora vem as fontes.

Grupo Desenvolvimento Web (Facebook)

WP Mix: Detect Chrome, IE, Firefox, Opera, and Safari

Confira outras dicas de JS do site. Já temos muito mais que o básico.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.