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

Question

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

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 (sur un clic dans un bouton d'installation) pour télécharger l'addon correspondant.

565

browser-detection javascript

demandé sur Willi Mentzel 2012-03-24 03:06:42

16 réponses

score 1283 · Answer 1

googler pour la détection fiable du navigateur se traduit souvent par la vérification de la chaîne de l'agent utilisateur. Cette méthode est pas fiable, parce qu'il est trivial de spoof cette valeur.

J'ai écrit une méthode pour détecter les navigateurs par duck typing .

n'utilisez la méthode de détection du navigateur que si c'est vraiment nécessaire, comme afficher des instructions spécifiques au navigateur pour installer une extension. Use détection des caractéristiques dans la mesure du 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 fiabilité

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

Internet Explorer: JScript compilation conditionnelle (jusqu'à IE9) et document.documentMode .
Edge: dans les navigateurs Trident et Edge, L'implémentation de Microsoft expose le constructeur StyleMedia . L'exclusion de Trident nous laisse avec le bord.
Firefox: L'API de Firefox pour installer des add-ons: InstallTrigger
Chrome: l'objet global chrome , contenant plusieurs propriétés dont un objet documenté chrome.webstore .
Safari: Un unique modèle de nommage dans sa dénomination de 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é fixé. Donc, nous vérifions contre SafariRemoteNotification , qui a été introduit après la version 7.1, pour couvrir tous les Safaris depuis la version 3.0 et plus.
Opera: window.opera existe depuis des années, mais sera abandonné quand Opera remplace son moteur par Blink + V8 (utilisé par le chrome).
- 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 ne l'est pas). Depuis Opera essaie dur de cloner Chrome, j'utilise agent utilisateur reniflant à cette fin.
- Update 2: !!window.opr && opr.addons peut être utilisé pour détecter Opera 20+ (evergreen).
Blink: CSS.supports() a été introduit en Blink une fois que Google a activé Chrome 28. C'est bien sûr le même clignement utilisé à L'Opéra.

Testé avec succès en:

Firefox 0.8 - 61
Chrome 1.0 - 68
Opera 8.0-34
Safari 3.0-10
IE 6-11
Edge-20-42

mis à jour en novembre 2016 pour inclure la détection des navigateurs Safari à partir du 9.1.3."
mis à jour en août 2018 pour mettre à jour les derniers tests réussis sur chrome, firefox IE et edge.

score 89 · Answer 2

vous pouvez essayer de suivre la façon 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 seulement la version de navigateur IE, alors vous pouvez suivre le code ci-dessous. Ce code fonctionne bien pour la version 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.);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>

score 50 · Answer 3

je sais qu'il peut être exagéré d'utiliser une lib pour cela, mais juste pour enrichir le fil, vous pouvez cocher est.js façon de faire:

is.firefox();
is.ie(6);
is.not.safari();

score 37 · Answer 4

dans le cas où quelqu'un trouve cela utile, j'ai fait réponse de Rob W dans une fonction qui retourne la chaîne du navigateur plutôt que d'avoir des variables multiples flottant autour. Puisque le navigateur ne peut pas vraiment changer sans charger à nouveau, je l'ai fait mettre en cache le résultat pour l'empêcher d'avoir besoin de 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());

score 11 · Answer 5

Voici une version corrigée pour 2016 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 cette information.)

// 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, de sorte qu'elle couvre 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 s'appuie sur l'agent utilisateur sniffing, mais aujourd'hui (ver. 15 ans et plus) même L'Opéra n'est lui-même qu'une coquille pour cligner des yeux.

score 8 · Answer 6

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 j'ai trouvé la combinaison suivante qui a fonctionné pour moi pour chacun d'eux. Je suis sûr qu'il peut être amélioré, mais c'est une solution rapide pour quiconque a 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.

score 8 · Answer 7

voici plusieurs bibliothèques importantes qui traitent la détection de navigateur.

Bowser by lancedikson - 2,713 bombe s-Last updated 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 de bestiejs-1912 mises à jour le 23 janvier 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>

Detect.js de darcyclarke - 501 mis à jour le 26 Oct. 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 Browser by gabceb-485 countries-Last updated 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) par QuirksMode - Dernière mise à jour le 14 Novembre 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 download-Last updated Feb 5, 2018
Modernizr - 22,320★s - Dernière mise à jour le 4 mars 2018 - Pour battre un cheval mort, la détection de fonctionnalité devrait conduire tout canIuse style de questions. La détection de navigateur est vraiment juste pour subtilités.

Lectures Complémentaires

score 6 · Answer 8

vous pouvez utiliser try et catch pour utiliser les différents messages d'erreur du navigateur. IE et edge ont été confondus, mais j'ai utilisé le type 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;
        }
    }
};

score 4 · Answer 9

Il ya aussi une méthode moins" hacky " qui fonctionne pour tous les navigateurs populaires. Google a inclus un navigateur-vérifier dans leur bibliothèque de fermeture . En particulier, regardez 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ésenter (étant donné que vous ayez la dernière version du compilateur de fermeture.)

score 4 · Answer 10

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

score 3 · Answer 11

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

score 1 · Answer 12

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',
   });
});

score 0 · Answer 13

ce combine 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;

score 0 · Answer 14

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


        }

score 0 · Answer 15

UAParser est l'une des bibliothèques JavaScript légères pour identifier le navigateur, moteur, OS, CPU, et le type/modèle de périphérique à partir de chaîne userAgent.

il y a un CDN disponible. Ici, j'ai inclus un code d'exemple pour détecter le navigateur en utilisant 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 navigateur, moteur, OS, CPU, et périphérique utilisant JavaScript?

score -1 · Answer 16

Simple, une seule ligne de code JavaScript vous donnera le nom du navigateur:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

Las etiquetas más populares

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

16 réponses

analyse de fiabilité

Testé avec succès en:

Bowser by lancedikson - 2,713 bombe s-Last updated Mar 12, 2018 - 2.9 KB

plate-forme.js de bestiejs-1912 mises à jour le 23 janvier 2018 - 5.9 KB

Detect.js de darcyclarke - 501 mis à jour le 26 Oct. 2015-2.9 KB

jQuery Browser by gabceb-485 countries-Last updated Nov 23, 2015-1.3 KB

Navigateur Détecter (ARCHIVE) par QuirksMode - Dernière mise à jour le 14 Novembre 2013 - 884B

Mentions Notables:

Lectures Complémentaires