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

823

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

Comment puis-je reconnaître le navigateur de l'utilisateur et rediriger (une fois qu'un bouton d'installation a été cliqué) pour télécharger l'addon correspondant?

FrankC
la source
2
essayez detectjs, il peut être utilisé pour tous les navigateurs
mec
1
Duplication possible de la détection
Matthijs Wessels
2
detect.js n'est plus maintenu (selon github.com/darcyclarke/Detect.js ), ils recommandent github.com/lancedikson/bowser
YakovL
J'ai utilisé le plugin UAParser, il est écrit en Vanilla JavaScript. Source: Comment détecter un navigateur, un moteur, un système d'exploitation, un processeur et un appareil à l'aide de JavaScript?
Luzan Baral

Réponses:

1689

La recherche sur Google d'une détection fiable du navigateur entraîne souvent la vérification de la chaîne de l'agent utilisateur. Cette méthode n'est pas fiable, car il est trivial d'usurper cette valeur.
J'ai écrit une méthode pour détecter les navigateurs en tapant du canard .

N'utilisez la méthode de détection du navigateur que si elle est vraiment nécessaire, par exemple en affichant des instructions spécifiques au navigateur pour installer une extension. Utilisez la détection des fonctionnalités lorsque cela est possible.

Démo: 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;

Analyse de fiabilité

La méthode précédente dépendait des propriétés du moteur de rendu ( -moz-box-sizinget -webkit-transform) pour détecter le navigateur. Ces préfixes seront finalement supprimés, afin de rendre la détection encore plus robuste, je suis passé à des 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 StyleMediaconstructeur. L'exclusion de Trident nous laisse avec Edge.
  • Edge (basé sur le chrome): L'agent utilisateur inclut la valeur "Edg / [version]" à la fin (ex: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • Firefox: API de Firefox pour installer des modules complémentaires: InstallTrigger
  • Chrome: l' chromeobjet global , contenant plusieurs propriétés, dont un chrome.webstoreobjet documenté .
  • La mise à jour 3 chrome.webstoreest obsolète et non définie dans les versions récentes
  • Safari: un modèle de dénomination unique dans la dénomination des constructeurs. Il s'agit de la méthode la moins durable de toutes les propriétés répertoriées et devinez quoi? Dans Safari 9.1.3, il a été corrigé. Nous vérifions donc SafariRemoteNotification, qui a été introduit après la version 7.1, pour couvrir tous les Safaris à partir de la version 3.0.
  • Opera: window.operaexiste depuis des années, mais sera abandonné lorsque Opera remplacera son moteur par Blink + V8 (utilisé par Chromium).
  • Mise à jour 1: Opera 15 est sorti , sa chaîne UA ressemble à Chrome, mais avec l'ajout de "OPR". Dans cette version, l' chromeobjet est défini (mais chrome.webstorene l'est pas). Étant donné qu'Opera s'efforce de cloner Chrome, j'utilise un agent utilisateur reniflant à cet effet.
  • Mise à jour 2: !!window.opr && opr.addonspeut être utilisée pour détecter Opera 20+ (evergreen).
  • Blink: a CSS.supports() été introduit dans Blink une fois que Google a allumé Chrome 28. C'est bien sûr le même Blink utilisé dans Opera.

Testé avec succès dans:

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

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

Mis à jour en août 2018 pour mettre à jour les derniers tests réussis sur Chrome, Firefox IE et Edge.

Mis à jour en janvier 2019 pour corriger la détection du chrome (en raison de la dépréciation de window.chrome.webstore) et inclure les derniers tests réussis sur le chrome.

Mis à jour en décembre 2019 pour ajouter Edge basé sur la détection du chrome (basé sur le commentaire @Nimesh).

Rob W
la source
5
FYI Cela ne fonctionne pas avec les extensions Chrome, car il window.chrome.webstoren'est pas défini ici. Je ne l'ai pas vérifié avec Firefox Extensions. is.jsmentionné ailleurs fonctionne dans les extensions Chrome et Firefox.
Nevf
60
isSafarine fonctionne pas avec Safari 10. Je vais dire que c'est une mauvaise solution (pas que j'en ai une bonne). Il n'y a aucune garantie que la plupart des éléments que vous recherchez ne seront pas supprimés OU ne seront pas ajoutés par d'autres navigateurs. Tous les sites qui utilisaient ce code pour vérifier Safari venaient de rompre avec les mises à niveau de macOS Sierra ou Safari 10 :(
gman
10
Mais cela a-t-il été testé sur les versions mobiles de ces navigateurs ainsi que sur les versions de bureau ? Et à vrai dire, il existe différentes versions mobiles et différentes versions de bureau par plate-forme. Donc vraiment, Firefox a 3 binaires pour Windows, Linux, Mac OS et 2 binaires pour Android et iOS.
DrZ214
3
Le courant isSafarine fonctionne pas <iframe>sous Safari 10.1.2
Mikko Ohtamaa
23
window.chrome.webstore est obsolète à partir de Chrome ver. 71: blog.chromium.org/2018/06/…
st_bk
133

Vous pouvez essayer la méthode suivante pour 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 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.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>
Nimesh
la source
3
Pourquoi écrirait-on autant de lignes de code? userAgent est ambigu.
igaurav du
5
Qu'en est-il de Microsoft Edge?
user6031759
3
la réponse ci-dessus vérifie le chrome avant de vérifier pour safari. parce que safari n'aura pas de chromemot - clé dans l'agent utilisateur. exemple d' 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
agent utilisateur
11
Stackoverflow utilise cette méthode
vityavv
3
Lorsque je teste ceci dans Opera (dernière version), cela renvoie 'Chrome' pour moi. Pour résoudre ce problème, j'ai modifié l'instruction Opera if en:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Kyle Vassella
60

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

is.firefox();
is.ie(6);
is.not.safari();
Rafael Eyng
la source
9
Il convient de noter que sous le capot, il effectue principalement la détection de l'agent utilisateur. Complété par la détection des fournisseurs / certaines fonctionnalités de détection par endroits.
TygerKrash
1
@TygerKrash bien sûr, vous avez absolument raison. C'est en fait ce que je voulais dire avec ma réponse: ouvrir le code source de is.jset vérifier comment ils le font.
Rafael Eyng
4
jQuery incluait des propriétés similaires: $ .browser.msie ... Ont été supprimés de la version 1.9 api.jquery.com/jquery.browser
Riga
@RafaelEyng: Je pense que le problème avec la détection des agents utilisateurs est que cette méthode n'est pas fiable.
HoldOffHunger du
C'est certainement l'approche la plus robuste lorsque vous supposez que la chaîne UA n'a pas été modifiée. Il détecte également correctement le système d'exploitation (android, win, mac, linux); type d'appareil (ordinateur de bureau, tablette, mobile). Il peut également tester la version du navigateur.
kashiraja
51

Voici plusieurs bibliothèques importantes qui gèrent la détection des navigateurs à partir de décembre 2019.

Bowser par lancedikson - 4,065 ★ s - Dernière mise à jour le 2 oct.2019 - 4,8 Ko

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>

* prend en charge Edge basé sur le chrome


Platform.js par bestiejs - 2 550 ★ s - Dernière mise à jour le 14 avr.2019 - 5,9 Ko

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>

Navigateur jQuery par gabceb - 504 ★ s - Dernière mise à jour le 23 novembre 2015 - 1,3 Ko

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 (Archivé) par darcyclarke - 522 ★ s - Dernière mise à jour le 26 octobre 2015 - 2,9 Ko

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>

Browser Detect (Archivé) 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 355 ★ s - Dernière mise à jour le 2 oct.2018
  • Modernizr - 23,397 ★ s - Dernière mise à jour le 12 janvier 2019 - Pour nourrir un cheval nourri, la détection des fonctionnalités devrait conduire à toutes les questions de style canIuse . La détection de navigateur est vraiment juste pour fournir des images personnalisées, télécharger des fichiers ou des instructions pour les navigateurs individuels.

Lectures complémentaires

KyleMit
la source
1
Il vaut bien quelques kilos de surcharge pour ne pas réinventer la roue.
glyphe
46

Au cas où quelqu'un trouverait cela utile, j'ai fait de la réponse de Rob W 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 se charger à nouveau, je l'ai fait en cache le résultat pour l'empêcher d'avoir à 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());

willsquire
la source
2
dans le navigateur Edge, il renvoie Chrome
Riz
2
@eFriend J'ai mis à jour la réponse aux derniers tests du navigateur.
pilau
4
J'aime ça, mais j'aurais préféré un repli sur userAgent (), au lieu de "Je ne sais pas".
HoldOffHunger
2
La propriété a window.chrome.webstoreété supprimée dans Chrome 71, donc cette approche ne fonctionne plus.
Bedla
vous pouvez remplacer la fonction par une fonction qui renvoie simplement le cachedResult et omettre l'instruction if. La première fois, vous devez toujours renvoyer le résultat. browser = function () {return cachedResult}; return cachedResult;
Timar Ivo Batis
22

Variante courte

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
la source
Si vous ne m'aimez pas, veuillez expliquer pourquoi.
Alex Nikulin
2
cela affichera «safari» lors de la navigation avec «chrome» sur ios
Reza
11

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

( modifier : 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 navigation, 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 le reniflement des agents utilisateurs, mais aujourd'hui (c'est-à-dire la version 15 et supérieure), même Opera n'est lui-même qu'un shell pour Blink.

pilaf
la source
Le !!window.MSAssertion;test ne fonctionne pas pour moi dans la version bêta d'Edge via Remote Desktop. Il retourne faux.
2016
@NoR Quelle version d'Edge utilisez-vous? Ça compte
pilau
1
@NoR Oh vous utilisez la VM ... L' MSAssertionastuce est ajustée à la version 25. Mais puisque de nombreux développeurs s'appuient sur les VM, je vais essayer de l'ajuster sur cette ancienne version. Bon appel. Merci.
pilau
1
@NoR Updated - devrait être à l'épreuve du temps. L'objet StyleMedia(en majuscule) est spécifique à IE et Edge et ne semble aller nulle part.
pilau
1
J'ai également trouvé UAParser un plugin js qui est toujours maintenu et qui est très précis et facile à utiliser.
Issac Gable
9

Vous pouvez utiliser tryet catchutiliser les différents messages d'erreur du navigateur. IE et edge étaient mélangés, mais j'ai utilisé le typage 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;
        }
    }
};
Mason Jones
la source
C'est une bonne idée: vous n'avez besoin ni d'objets "fenêtre", ni d'objets "navigateur"!
Vadim
Ma suggestion est de supprimer complètement le document et la fenêtre. Voir bloc IE: retournez "firefox"; } else if (err.search ("[object error]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ("ne peut pas convertir e en objet")! == -1) {return "opera";
Vadim

Comment cela fait-il la différence entre IE et Edge?
Mason Jones

Étrange, je ne peux plus reproduire err.search ("[erreur d'objet]"). Quoi qu'il en soit, pour moi, firefox vs chrome vs autre chose suffit. Je l'utilise dans un fichier PAC où les objets fenêtre et document ne sont pas disponibles.
Vadim

Je viens de découvrir la cause. Il semble que pour créer un fichier PAC, Windows 7 n'utilise pas IE11, qui est installé sur ma machine, mais plutôt un moteur de type IE7 (probablement à partir de l'hôte Windows). Donc, err.toString () donne "[erreur d'objet]" tandis qu'à l'intérieur d'IE11, il donne la chaîne "Impossible d'obtenir la propriété ..." comme dans votre code. Ainsi, le code ci-dessus devrait échouer avec IE7.
Vadim

8

Merci tout le monde. 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 de:

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.


avez-vous testé le chrome sur iOS?
Vic

8

Aucune idée s'il est utile à n'importe qui mais voici une variante pour faire plaisir à TypeScript.

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
Pourquoi avez-vous des ifs avec "false" comme condition?
Yonatan Nir
@YonatanNir Je pense qu'il est destiné à détecter la compilation conditionnelle: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Lucas Azevedo
La plupart des réponses ici ne visent pas à être "hacky" si elles sont la seule méthode fiable. userAgent, comme indiqué plusieurs fois, est facilement usurpé et n'est donc pas fiable.
HoldOffHunger
3
un millier de lignes de code que vous appelez léger?
deathangel908
Est-il utile de dire à l'utilisateur quel navigateur il utilise? J'imagine qu'ils le savaient déjà.
HoldOffHunger
1
@HoldOffHunger, son intention principale était plus d'adapter le code le plus compatible au navigateur actif, plutôt que d'informer l'utilisateur du navigateur qu'ils utilisent. Sauf si le navigateur qu'ils utilisent est super obsolète et a été exclu de la compatibilité backwars, dans laquelle il ne serait pas difficile de faire savoir à l'utilisateur qu'il peut bénéficier d'une meilleure expérience s'il passe à quelque chose de plus à jour
Joe Borg
Malheureusement, ce n'est pas une bonne réponse. Edge a Chrome dans son message userAgent. Il vaut mieux utiliser !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo
16
L'agent utilisateur seul ne nous en dit pas assez. Par exemple, mon agent utilisateur est "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 45.0.2454.85 Safari / 537.36", qui mentionne Mozilla, Chrome et Safari. Quel type de navigateur suis-je?
eremzeit
Désolé mais je ne vous ai pas indiqué "Quel type de navigateur suis-je?" que voulez-vous obtenir?
Nirav Mehta
1
@NiravMehta Ce qu'il voulait dire, c'est qu'il navigator.userAgentvous indique tous les navigateurs possibles. Donc, ce n'est vraiment pas fiable, le seul cas où cela fonctionnerait est si l'utilisateur n'a qu'un seul navigateur.
Baldráni
1
ce n'est pas un moyen fiable de détecter un navigateur. Certains useragents incluent à la fois chrome et safari, il n'y a donc aucun moyen de détecter celui que nous devrions considérer et durer mais, le moindre, useragent peut être modifié par la page Web.
Juvenik
5

Détection des navigateurs sur ordinateur et mobile: Edge, Opera, Chrome, Safari, Firefox, IE

J'ai fait quelques modifications dans le code @nimesh maintenant, cela fonctionne également pour Edge, et le problème d'Opera a été résolu:

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

Merci @nimesh utilisateur: 2063564

Irshad Khan
la source
4

Il existe également une méthode moins "hacky" qui fonctionne pour tous les navigateurs populaires. Google a inclus une vérification de navigateur dans sa bibliothèque de fermeture . En particulier, jetez un œil à goog.userAgentet 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.)

Albert
la source
La plupart des réponses ici ne visent pas à être "hacky" si elles sont la seule méthode fiable. userAgent, comme indiqué plusieurs fois, est facilement usurpé et n'est donc pas fiable.
HoldOffHunger
4

Si vous avez besoin de savoir quelle est la version numérique d'un navigateur particulier, vous pouvez utiliser l'extrait de code suivant. Actuellement, il vous indiquera la version de 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
la source
2

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.

Un CDN est disponible. Ici, j'ai inclus un exemple de code pour détecter un navigateur 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>

Vous pouvez maintenant utiliser la valeur de result.browserpour programmer conditionnellement votre page.

Tutoriel source: Comment détecter un navigateur, un moteur, un système d'exploitation, un processeur et un appareil à l'aide de JavaScript?

Luzan Baral
la source
3
un millier de lignes de code que vous appelez léger?
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
la source
0

Cela 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;
Joe Borg
la source
Est-il utile de dire à l'utilisateur quel navigateur il utilise? J'imagine qu'ils le savaient déjà.
HoldOffHunger
1
@HoldOffHunger, son intention principale était plus d'adapter le code le plus compatible au navigateur actif, plutôt que d'informer l'utilisateur du navigateur qu'ils utilisent. Sauf si le navigateur qu'ils utilisent est super obsolète et a été exclu de la compatibilité backwars, dans laquelle il ne serait pas difficile de faire savoir à l'utilisateur qu'il peut bénéficier d'une meilleure expérience s'il passe à quelque chose de plus à jour
Joe Borg
0

Ici, vous découvrez le navigateur qu'il exécute.

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
la source
0

Nous pouvons utiliser les méthodes ci-dessous

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
la source
0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
Landaida
la source
Malheureusement, ce n'est pas une bonne réponse. Edge a Chrome dans son message userAgent. Il vaut mieux utiliser !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo
-3

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

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
Nirav Mehta
la source
16
L'agent utilisateur seul ne nous en dit pas assez. Par exemple, mon agent utilisateur est "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 45.0.2454.85 Safari / 537.36", qui mentionne Mozilla, Chrome et Safari. Quel type de navigateur suis-je?
eremzeit
Désolé mais je ne vous ai pas indiqué "Quel type de navigateur suis-je?" que voulez-vous obtenir?
Nirav Mehta
1
@NiravMehta Ce qu'il voulait dire, c'est qu'il navigator.userAgentvous indique tous les navigateurs possibles. Donc, ce n'est vraiment pas fiable, le seul cas où cela fonctionnerait est si l'utilisateur n'a qu'un seul navigateur.
Baldráni
1
ce n'est pas un moyen fiable de détecter un navigateur. Certains useragents incluent à la fois chrome et safari, il n'y a donc aucun moyen de détecter celui que nous devrions considérer et durer mais, le moindre, useragent peut être modifié par la page Web.
Juvenik