Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera?

J'ai 5 addons / extensions pour FF, Chrome, IE, Opera et Safari.

J'ai besoin du code pour reconnaître le navigateur de l'utilisateur et rediriger (en cliquant sur un bouton d'installation) pour télécharger l'addon correspondant.

Author: Willi Mentzel, 2012-03-24
Source

16 answers

Googler pour une détection fiable du navigateur entraîne souvent la vérification de la chaîne de l'agent utilisateur. Cette méthode est pas fiable, car il est trivial d'usurper cette valeur.
J'ai écrit une méthode pour détecter les navigateurs par canard-taper.

N'utilisez la méthode de détection du navigateur que si cela est vraiment nécessaire, comme afficher des instructions spécifiques au navigateur pour installer une extension. Utilisez la détection de fonction lorsque cela est possible.

Démo: https://jsfiddle.net/311aLtkz/

// 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+
var isChrome = !!window.chrome && !!window.chrome.webstore;

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

Analyse de la fiabilité

Le méthode précédente dépendait propriétés du moteur de rendu (-moz-box-sizing et -webkit-transform) pour détecter le navigateur. Ces préfixes seront finalement supprimés, donc pour rendre la détection encore plus robuste, je suis passé aux caractéristiques spécifiques au navigateur:

  • Internet Explorer: Compilation conditionnelle de JScript (jusqu'à IE9) et document.documentMode.
  • Edge: Dans les navigateurs Trident et Edge, l'implémentation de Microsoft expose le constructeur StyleMedia. L'exclusion du Trident nous laisse avec Edge.
  • Firefox: L'API de Firefox pour installer des modules complémentaires: InstallTrigger
  • Chrome: L'objet global chrome, contenant plusieurs propriétés dont une chrome.webstore objet.
  • Safari: Un modèle de nommage unique dans sa dénomination des constructeurs. C'est la méthode la moins durable de toutes les propriétés énumérées et devinez quoi? Dans Safari 9.1.3, il a été corrigé. Nous vérifions donc par rapport à SafariRemoteNotification, qui a été introduit après la version 7.1, pour couvrir tous les Safaris à partir de la version 3.0.
  • Opera: window.opera existe depuis des années, maissera abandonné lorsque Opera remplacera son moteur par Blink + V8 (utilisé par Chromium).
    • Mise à jour 1: Opera 15 a été publié , sa chaîne UA ressemble à Chrome, mais avec l'ajout de "OPR". Dans cette version, l'objet chrome est défini (mais chrome.webstore n'est-ce pas). Comme Opera essaie de cloner Chrome, j'utilise le reniflage de l'agent utilisateur à cette fin.
    • mise à Jour 2: !!window.opr && opr.addons peut être utilisé pour détecter Opéra 20+ (evergreen).
  • Clignote: CSS.supports() a été introduit dans Blink une fois que Google a activé Chrome 28. C'est bien sûr, le même clignotement utilisé dans Opera.

Testé avec succès dans:

  • Firefox 0.8 - 61
  • Chrome 1.0-68
  • Opéra 8.0-34
  • Safari 3.0 - 10
  • IE 6-11
  • Bord - 20-42

Mise à jour en novembre 2016 pour inclure la détection des navigateurs Safari à partir de la version 9.1.3 et supérieure

Mis à jour en août 2018 pour mettre à jour les derniers tests réussis sur chrome, firefox IE et edge.

 1283
Author: Rob W, 2018-08-16 10:58:14

Vous pouvez essayer de vérifier la version du navigateur.

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

Et si vous avez besoin de connaître uniquement la version du navigateur IE, vous pouvez suivre le code ci-dessous. Ce code fonctionne bien pour les versions IE6 à 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>
 89
Author: Nimesh, 2018-05-02 23:58:14

Je sais qu'il peut être exagéré d'utiliser une bibliothèque pour cela, mais juste pour enrichir le thread, vous pouvez vérifier est.js façon de faire ceci: 

is.firefox();
is.ie(6);
is.not.safari();
 50
Author: Rafael Eyng, 2015-05-13 20:55:27

Au cas où quelqu'un trouverait cela utile, j'ai fait La réponse de Rob W dans une fonction qui renvoie la chaîne du navigateur plutôt que d'avoir plusieurs variables flottantes. Étant donné que le navigateur ne peut pas non plus vraiment changer sans charger à nouveau, je l'ai fait mettre en cache le résultat pour l'empêcher d'avoir besoin de le travailler la prochaine fois que la fonction est appelée.

/**
 * 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());
 37
Author: willsquire, 2017-10-26 21:19:24

Voici une version 2016 ajustée de la réponse de Rob, y compris Microsoft Edge et la détection de Blink:

(edit : J'ai mis à jour la réponse de Rob ci-dessus avec ces informations.)

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

La beauté de cette approche est qu'elle repose sur les propriétés du moteur de navigateur, elle couvre donc même les navigateurs dérivés, tels que Yandex ou Vivaldi, qui sont pratiquement compatibles avec les principaux navigateurs dont ils utilisent les moteurs. L'exception est Opera, qui repose sur l'agent utilisateur reniflant, mais aujourd'hui (c'est à dire ver. 15 et plus) même Opera est lui-même seulement une coquille pour Blink.

 11
Author: pilau, 2017-02-08 10:02:19

Merci à tous. J'ai testé les extraits de code ici sur les navigateurs récents: Chrome 55, Firefox 50, IE 11 et Edge 38 et je suis venu avec la combinaison suivante qui a fonctionné pour moi pour tous. Je suis sûr que cela peut être amélioré, mais c'est une solution rapide pour ceux qui en ont besoin:

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

Il ajoute une classe CSS au HTML, avec le nom du navigateur.

 8
Author: dnns, 2018-03-23 13:38:40

Voici plusieurs bibliothèques importantes qui gèrent la détection du navigateur.

Bowser par lancedikson-2,713★s-Dernière mise à jour Mar 12, 2018-2.9 KB

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

Plate-forme.js{[14] } par bestiejs-1912★s - Dernière mise à jour Jan 23, 2018-5.9 KB

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>

Détecter.js par darcyclarke-501★s-Dernière mise à jour Oct 26, 2015-2.9 KB

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>

JQuery Navigateur par gabceb-485★s - Dernière mise à jour Nov 23, 2015-1.3 KB

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>

Navigateur Détecter (ARCHIVE){[14] } par QuirksMode - Dernière mise à jour Nov 14, 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>

Mentions notables:

  • WhichBrowser - 1,230★s-Dernière mise à jour Fév 5, 2018
  • Modernizr - 22,320★s-Dernière mise à jour Mar 4, 2018-Pour battre un cheval mort, la détection de fonctionnalités devrait conduire tout canIuse questions de style. La détection du navigateur est vraiment juste pour les subtilités.

Lecture supplémentaire

 8
Author: KyleMit, 2018-03-30 23:12:40

Vous pouvez utiliser try et catch pour utiliser le navigateur différent des messages d'erreur. IE et edge ont été mélangés, mais j'ai utilisé le typage de canard de Rob W (basé sur ce projet ici: 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;
        }
    }
};
 6
Author: Mason Jones, 2018-02-08 18:23:02

Il existe également une méthode moins "hacky" qui fonctionne pour tous les navigateurs populaires. Google a inclus une vérification du navigateur dans leur bibliothèque de fermeture . En particulier, avoir un regard sur goog.userAgent et goog.userAgent.product. De cette façon, vous êtes également à jour si quelque chose change dans la façon dont les navigateurs se présentent (étant donné que vous exécutez toujours la dernière version du compilateur de fermeture.)

 4
Author: Albert, 2017-03-23 03:56:49

Variante Courte

    var browser = (function(agent){
        switch(true){
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
 4
Author: Alex Nikulin, 2018-03-23 11:21:04

Si vous avez besoin de savoir quelle est la version numérique d'un navigateur particulier, vous pouvez utiliser l'extrait suivant. Actuellement, il vous dira la version de Chrome/Chrome/Firefox:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
 3
Author: Valera Tumash, 2018-05-29 18:34:42 
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',
   });
});
 1
Author: neel upadhyay, 2017-05-04 10:29:42

Ce combine à la fois la réponse originale de Rob et la mise à jour de Pilau pour 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;
 0
Author: Joe Borg, 2016-01-21 09:48:16

Ici, vous découvrez quel navigateur est-il en cours d'exécution.

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")}


        }
 0
Author: Ajay, 2017-12-06 04:21:55

UAParser est l'une des bibliothèques JavaScript légères permettant d'identifier le navigateur, le moteur, le système d'exploitation, le processeur et le type/modèle de périphérique à partir de la chaîne userAgent.

Il y a un CDN disponible. Ici, j'ai inclus un exemple de code pour détecter le navigateur à l'aide d'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>

Maintenant, vous pouvez utiliser la valeur de result.browser pour programmer conditionnellement votre page.

Tutoriel Source: Comment détecter le navigateur, le moteur, le système d'exploitation, le processeur et le périphérique à l'aide de JavaScript?

 0
Author: Luzan Baral, 2018-07-04 07:47:56

Une simple ligne de code JavaScript vous donnera le nom du navigateur:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
 -1
Author: Nirav Mehta, 2017-10-26 20:24:14