Como detectar o navegador Safari, Chrome, IE, Firefox e Opera?

822

Eu tenho 5 addons / extensões para FF, Chrome, IE, Opera e Safari.

Como posso reconhecer o navegador do usuário e redirecionar (uma vez que um botão de instalação foi clicado) para baixar o complemento correspondente?

FrankC
fonte
2
tente detectjs, ele pode ser usado para todos os navegadores
cara
1
Possível duplicata da detecção
Matthijs Wessels
2
O detect.js não é mais mantido (de acordo com github.com/darcyclarke/Detect.js ), eles recomendam github.com/lancedikson/bowser
YakovL:
Eu usei o UAParser Plugin, está escrito em JavaScript Vanilla. Fonte: Como detectar navegador, mecanismo, sistema operacional, CPU e dispositivo usando JavaScript?
Luzan Baral
Possível duplicata de Como você pode detectar a versão de um navegador?
21419 KyleMit

Respostas:

1688

Pesquisando a detecção confiável do navegador geralmente resulta na verificação da sequência do agente do usuário. Este método não é confiável, porque é trivial falsificar esse valor.
Eu escrevi um método para detectar navegadores digitando pato .

Use o método de detecção do navegador apenas se for realmente necessário, como mostrar instruções específicas do navegador para instalar uma extensão. Use a detecção de recursos quando possível.

Demonstração: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Análise de confiabilidade

O método anterior dependia das propriedades do mecanismo de renderização ( -moz-box-sizinge -webkit-transform) para detectar o navegador. Esses prefixos serão eventualmente eliminados. Portanto, para tornar a detecção ainda mais robusta, mudei para características específicas do navegador:

  • Internet Explorer: compilação condicional do JScript (até IE9) e document.documentMode.
  • Borda: nos navegadores Trident e Edge, a implementação da Microsoft expõe o StyleMediaconstrutor. Excluir Trident nos deixa com Edge.
  • Edge (baseado em cromo): o agente do usuário inclui o valor "Edg / [version]" no final (ex: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • Firefox: API do Firefox para instalar complementos: InstallTrigger
  • Chrome: o chromeobjeto global , contendo várias propriedades, incluindo um chrome.webstoreobjeto documentado .
  • A atualização 3 chrome.webstorefoi preterida e indefinida nas versões recentes
  • Safari: um padrão de nomeação exclusivo na nomeação de construtores. Este é o método menos durável de todas as propriedades listadas e adivinhem? No Safari 9.1.3, foi corrigido. Portanto, estamos comparando SafariRemoteNotification, que foi introduzido após a versão 7.1, para cobrir todos os Safaris a partir do 3.0 e superior.
  • Opera: window.operaexiste há anos, mas será descartado quando o Opera substituir seu mecanismo pelo Blink + V8 (usado pelo Chromium).
  • Atualização 1: O Opera 15 foi lançado , sua string UA se parece com o Chrome, mas com a adição de "OPR". Nesta versão, o chromeobjeto está definido (mas chrome.webstorenão está). Como o Opera tenta clonar o Chrome, eu uso o agente do usuário que fareja para esse fim.
  • Atualização 2: !!window.opr && opr.addonspode ser usado para detectar o Opera 20+ (sempre-verde).
  • Blink: CSS.supports() foi introduzido no Blink quando o Google ativou o Chrome 28. É claro que é o mesmo Blink usado no Opera.

Testado com sucesso em:

  • Firefox 0.8 - 61
  • Chrome 1.0 - 71
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Edge - 20-42
  • Edge Dev - 80.0.361.9

Atualizado em novembro de 2016 para incluir a detecção de navegadores Safari a partir da 9.1.3 e superior

Atualizado em agosto de 2018 para atualizar os últimos testes bem-sucedidos no chrome, firefox IE e edge.

Atualizado em janeiro de 2019 para corrigir a detecção de cromo (por causa da descontinuação de window.chrome.webstore) e incluir os últimos testes bem-sucedidos no chrome.

Atualizado em dezembro de 2019 para adicionar o Edge com base na detecção de cromo (com base no comentário do @Nimesh).

Rob W
fonte
5
FYI Isso não funciona com as extensões do Chrome, pois window.chrome.webstoreé indefinido lá. Não foi verificado com as extensões do Firefox. is.jsmencionado em outro lugar funciona nas extensões Chrome e Firefox.
Nevf 31/08/16
60
isSafarinão funciona com o Safari 10. Vou argumentar que esta é uma solução ruim (não que eu tenha uma boa). Não há garantia de que muitas das coisas que sua verificação não serão removidas OU não serão adicionadas por outros navegadores. Todos os sites que estavam usando esse código para verificação do Safari simplesmente romperam com as atualizações do macOS Sierra ou Safari 10 :(
gman
10
Mas isso foi testado nas versões móveis desses navegadores e também nas versões para desktop ? E, sinceramente, existem diferentes versões para celular e diferentes para desktop por plataforma. Realmente, o firefox possui 3 binários para Windows, Linux, Mac OS e 2 binários para Android e iOS.
DrZ214
3
O atual isSafarinão funciona no <iframe>Safari 10.1.2
Mikko Ohtamaa
23
window.chrome.webstore foi descontinuado a partir da versão do Chrome. 71: blog.chromium.org/2018/06/…
st_bk
133

Você pode tentar a seguinte maneira de verificar a versão do navegador.

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() { 
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

E se você precisa conhecer apenas a versão do navegador IE, pode seguir o código abaixo. Este código funciona bem para a versão IE6 para IE11

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>
Nimesh
fonte
3
Por que alguém escreveria tantas linhas de código? userAgent é ambíguo.
igaurav
5
E o Microsoft Edge?
user6031759
3
a resposta acima verifica o chrome antes de verificar o safari. porque o safari não terá chromepalavra-chave no useragent. exemplo de useragent safari -mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
Golak Sarangi
11
Stackoverflow utiliza este método
vityavv
3
Ao testar isso no Opera (versão mais recente), isso retorna 'Chrome' para mim. Para corrigir isso, eu mudei o Opera if para:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Kyle Vassella
60

Eu sei que pode ser um exagero usar uma lib para isso, mas apenas para enriquecer o thread, você pode verificar o modo is.js de fazer isso:

is.firefox();
is.ie(6);
is.not.safari();
Rafael Eyng
fonte
9
Só vale a pena notar que, sob o capô, ele faz principalmente a detecção de agente do usuário. Complementado com detecção de fornecedor / detecção de alguns recursos em alguns locais.
TygerKrash
1
@TygerKrash claro, você está absolutamente certo. Na verdade, foi isso que eu quis dizer com a minha resposta: abra o código-fonte is.jse verifique como eles o fazem.
Rafael Eyng
4
jQuery usado para incluir propriedades semelhantes: $ .browser.msie ... foram retirados da versão 1.9 api.jquery.com/jquery.browser
Riga
@ RafaelEyng: Acho que o problema com a detecção de agente de usuário é que esse método não é confiável.
HoldOffHunger 26/10
Essa é definitivamente a abordagem mais robusta quando você assume que a cadeia de caracteres UA não foi modificada. Ele também detecta corretamente o SO (android, win, mac, linux); tipo de dispositivo (computador, tablet, celular). Também pode testar a versão do navegador.
Kashiraja 17/02/19
51

Aqui estão várias bibliotecas importantes que lidam com a detecção do navegador em dezembro de 2019.

Bowser by lancedikson - 4.065 ★ s - Última atualização em 2 de outubro de 2019 - 4,8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);
<script src="https://unpkg.com/[email protected]/es5.js"></script>

* suporta Edge com base no Chromium


Platform.js por bestiejs - 2.550 ★ s - Última atualização 14 de abril de 2019 - 5,9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

jQuery Browser por gabceb - 504 ★ s - Última atualização 23 de novembro de 2015 - 1,3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

Detect.js (arquivado) por darcyclarke - 522 ★ s - Última atualização em 26 de outubro de 2015 - 2,9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

Detecção de navegador (arquivada) por QuirksMode - Última atualização em 14 de novembro de 2013 - 884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>


Menções notáveis:

  • WhichBrowser - 1.355 ★ s - Última atualização em 2 de outubro de 2018
  • Modernizr - 23.397 ★ s - Última atualização em 12 de janeiro de 2019 - Para alimentar um cavalo alimentado, a detecção de recursos deve direcionar qualquer pergunta ao estilo canIuse . A detecção do navegador é realmente apenas para fornecer imagens personalizadas, baixar arquivos ou instruções para navegadores individuais.

Leitura adicional

KyleMit
fonte
1
Vale a pena alguns Kb de sobrecarga para não reinventar a roda.
glifo
46

Caso alguém ache isso útil, transformei a resposta de Rob W em uma função que retorna a sequência do navegador em vez de ter várias variáveis ​​flutuando. Como o navegador também não pode realmente mudar sem carregar novamente, fiz o cache do resultado para evitar que ele precise ser resolvido na próxima vez que a função for chamada.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());

requerer
fonte
2
no navegador Edge, ele retorna o Chrome
Riz
2
Atualizei a resposta para os testes mais recentes do navegador.
pilau
4
Eu gosto disso, mas teria preferido um fallback para userAgent (), em vez de "Não sei".
HoldOffHunger
2
A propriedade window.chrome.webstorefoi removida no Chrome 71, portanto, essa abordagem não está mais funcionando.
Bedla
você pode substituir a função por uma função que simplesmente retorna o cachedResult e omite a instrução if. A primeira vez que você precisar retornar o resultado ainda. browser = function () {retornar cachedResult}; return cachedResult;
Timar Ivo Batis
22

Variante curta

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)

Alex Nikulin
fonte
Se você não gosta de mim, por favor, explique o porquê.
Alex Nikulin
2
isso mostrará 'safari' enquanto navega com 'chrome' no ios
Reza
11

Aqui está uma versão ajustada para 2016 da resposta de Rob, incluindo o Microsoft Edge e a detecção do Blink:

( editei : atualizei a resposta de Rob acima com essas informações.)

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);

A vantagem dessa abordagem é que ela depende das propriedades do mecanismo do navegador, de modo que abrange até navegadores derivados, como Yandex ou Vivaldi, que são praticamente compatíveis com os principais navegadores cujos mecanismos eles usam. A exceção é o Opera, que conta com o farejamento do agente do usuário, mas hoje (ou seja, versões 15 e seguintes), até o Opera é apenas um shell para o Blink.

pilau
fonte
O !!window.MSAssertion;teste não funciona para mim na versão beta do Edge via Área de Trabalho Remota. Retorna false.
NoR
@NoR Qual versão do Edge você está usando? Isso é importante #
pilau
1
@NoR Oh, você está usando a VM ... O MSAssertiontruque é ajustado para a versão 25. Mas, como muitos desenvolvedores dependem das VMs, tentarei ajustá-la nesta versão mais antiga. Boa decisão. Obrigado.
pilau
1
@NoR Atualizado - deve ser à prova de futuro. O StyleMediaobjeto (em maiúscula) é específico para o IE e Edge e não parece estar indo a lugar algum.
pilau
1
Eu também encontrei UAParser um plugin js que ainda mantém e é altamente preciso e fácil de usar.
perfil completo de Issac Gable
9

Você pode usar try e catchusar as diferentes mensagens de erro do navegador. O IE e o edge foram misturados, mas usei a digitação de pato de Rob W (com base neste projeto aqui: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};
Mason Jones
fonte
É uma ótima idéia: você não precisa de objetos "janela" nem "navegador"!
Vadim
Minha sugestão é livrar completamente o documento e a janela. Veja parte do IE: retorne "firefox"; } else if (err.search ("[erro do objeto]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ("não pode converter e em objeto")! == -1) {return "opera";
Vadim

Como isso diferencia o IE e o Edge?
Mason Jones

Estranho, não consigo mais reproduzir err.search ("[erro do objeto]"). Enfim, para mim firefox vs chrome vs alguma outra coisa é suficiente. Eu o uso em um arquivo PAC onde objetos de janela e documento não estão disponíveis.
Vadim

Apenas descobri a causa. Parece que, para manipular um arquivo PAC, o Windows 7 não usa o IE11, que está instalado na minha máquina, mas sim o mecanismo semelhante ao IE7 (provavelmente do host do Windows). Portanto, err.toString () fornece "[Object Error]" enquanto no IE11 ele fornece a string "Impossível obter propriedade ..." como no seu código. Portanto, o código acima deve falhar com o IE7.
Vadim

8

Obrigado a todos. Testei os trechos de código aqui nos navegadores recentes: Chrome 55, Firefox 50, IE 11 e Edge 38 e criei a seguinte combinação que funcionou para mim para todos eles. Tenho certeza de que pode ser aprimorado, mas é uma solução rápida para quem precisa:

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

Ele adiciona uma classe CSS ao HTML, com o nome do navegador.


você testou o chrome no ios?
Vic

8

Não faço ideia se é útil para alguém, mas aqui está uma variante para deixar o TypeScript feliz.

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

// Safari 3.0+ "[object HTMLElementConstructor]" 
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
    return 'safari';
}

// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}

Tony Smith
Por que você tem alguns ifs com "false" como condição?
Yonatan Nir
@YonatanNir Acho que é para detectar a compilação condicional: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Lucas Azevedo
A maioria das respostas aqui não se preocupa em ser "hacky" se elas são o único método confiável. O userAgent, como observado várias vezes, é facilmente falsificado e, portanto, não é confiável.
HoldOffHunger
3
um mil linhas de código que você chama leve?
deathangel908
Existe um ponto em dizer ao usuário qual navegador ele está usando? Eu imagino que eles já sabiam disso.
HoldOffHunger
1
@HoldOffHunger, sua principal intenção era adaptar o código mais compatível ao navegador ativo, em vez de informar ao usuário qual navegador ele está usando. A menos que o navegador que eles estão usando esteja super desatualizado e tenha sido excluído da compatibilidade com versões anteriores, o que não faria mal em informar ao usuário que eles podem se beneficiar de uma experiência melhor caso mudem para algo mais atualizado
Joe Borg
Infelizmente, não é uma boa resposta. O Edge tem o Chrome em sua mensagem userAgent. É melhor usar !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo 18/04
16
O userAgent sozinho não nos diz o suficiente. Por exemplo, meu agente de usuário é "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 45.0.2454.85 Safari / 537.36", que menciona Mozilla, Chrome e Safari. Que tipo de navegador eu sou?
eremzeit
Desculpe, mas não o obtive por "Que tipo de navegador sou eu?" o que você quer conseguir?
Nirav Mehta
1
@NiravMehta O que ele quis dizer é que navigator.userAgentdiz a você todos os navegadores possíveis que você possui. Portanto, isso realmente não é confiável, o único caso em que funcionaria seria se o usuário tivesse apenas um navegador.
Baldráni 8/03/16
1
Esta não é uma maneira confiável de detectar o navegador. Alguns useragents incluem o chrome e o safari; portanto, não há como detectar qual deles devemos considerar e por último, mas, não menos importante, o useragent pode ser modificado pela página da web.
Juvenik
5

Detectando navegadores em computadores e dispositivos móveis: Edge, Opera, Chrome, Safari, Firefox, IE

Fiz algumas alterações no código @nimesh agora ele também está funcionando para o Edge, e o problema do Opera foi corrigido:

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

Obrigado @nimesh usuário: 2063564

Irshad Khan
fonte
4

Há também um método menos "hacky" que funciona para todos os navegadores populares. O Google incluiu uma verificação do navegador na Biblioteca de fechamento . Em particular, dê uma olhada goog.userAgente goog.userAgent.product. Dessa forma, você também estará atualizado se algo mudar na forma como os navegadores se apresentam (desde que você sempre execute a versão mais recente do compilador de fechamento).

Albert
fonte
A maioria das respostas aqui não se preocupa em ser "hacky" se elas são o único método confiável. O userAgent, como observado várias vezes, é facilmente falsificado e, portanto, não é confiável.
HoldOffHunger
4

Se você precisar saber qual é a versão numérica de um navegador específico, poderá usar o seguinte snippet. Atualmente, ele informa a versão do Chrome / Chromium / Firefox:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
Valera Tumash
fonte
2

O UAParser é uma das bibliotecas JavaScript leves para identificar navegador, mecanismo, sistema operacional, CPU e tipo / modelo de dispositivo da string userAgent.

Há uma CDN disponível. Aqui, incluí um código de exemplo para detectar o navegador usando o UAParser.

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

Agora você pode usar o valor de result.browserpara programar condicionalmente sua página.

Tutorial de origem: como detectar navegador, mecanismo, sistema operacional, CPU e dispositivo usando JavaScript?

Luzan Baral
fonte
3
um mil linhas de código que você chama leve?
deathangel908
1
var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});
neel upadhyay
fonte
0

Isso combina a resposta original de Rob e a atualização do Pilau para 2016

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
Joe Borg
fonte
Existe um ponto em dizer ao usuário qual navegador ele está usando? Eu imagino que eles já sabiam disso.
HoldOffHunger
1
@HoldOffHunger, sua principal intenção era adaptar o código mais compatível ao navegador ativo, em vez de informar ao usuário qual navegador ele está usando. A menos que o navegador que eles estão usando esteja super desatualizado e tenha sido excluído da compatibilidade com versões anteriores, o que não faria mal em informar ao usuário que eles podem se beneficiar de uma experiência melhor caso mudem para algo mais atualizado
Joe Borg
0

Aqui você descobre qual navegador está sendo executado.

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }
Ajay Kumar
fonte
0

Podemos usar os métodos util abaixo

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };
NPE
fonte
0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
Landaida
fonte
Infelizmente, não é uma boa resposta. O Edge tem o Chrome em sua mensagem userAgent. É melhor usar !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo 18/04
-3

Uma linha simples e simples de código JavaScript fornecerá o nome do navegador:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
Nirav Mehta
fonte
16
O userAgent sozinho não nos diz o suficiente. Por exemplo, meu agente de usuário é "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 45.0.2454.85 Safari / 537.36", que menciona Mozilla, Chrome e Safari. Que tipo de navegador eu sou?
eremzeit
Desculpe, mas não o obtive por "Que tipo de navegador sou eu?" o que você quer conseguir?
Nirav Mehta
1
@NiravMehta O que ele quis dizer é que navigator.userAgentdiz a você todos os navegadores possíveis que você possui. Portanto, isso realmente não é confiável, o único caso em que funcionaria seria se o usuário tivesse apenas um navegador.
Baldráni 8/03/16
1
Esta não é uma maneira confiável de detectar o navegador. Alguns useragents incluem o chrome e o safari; portanto, não há como detectar qual deles devemos considerar e por último, mas, não menos importante, o useragent pode ser modificado pela página da web.
Juvenik