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


540
2018-03-23 23:06


origine


Réponses:


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

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

Démonstration 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é

le méthode précédente dépendait des 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é à des caractéristiques spécifiques au navigateur:

  • Internet Explorer: JScript's Compilation conditionnelle (jusqu'à IE9) et document.documentMode.
  • Edge: Dans les navigateurs Trident et Edge, l'implémentation de Microsoft expose le StyleMedia constructeur. L'exclusion de Trident nous laisse avec Edge.
  • Firefox: l'API de Firefox pour installer les add-ons: InstallTrigger
  • Chrome: Le global chrome objet, contenant plusieurs propriétés, y compris un document chrome.webstore objet.
  • Safari: Un modèle de nommage unique dans son nom des constructeurs. C'est la méthode la moins durable de toutes les propriétés listées et devinez quoi? Dans Safari 9.1.3, il a été corrigé. Nous vérifions donc contre SafariRemoteNotification, qui a été introduit après la version 7.1, pour couvrir tous les Safaris à partir de la version 3.0.
  • Opéra: window.opera existe depuis des années, mais sera abandonné quand Opera remplace 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 le chrome objet est défini (mais chrome.webstore n'est pas). Comme Opera tente de cloner Chrome, j'utilise le sniffing de l'agent utilisateur à cette fin.
    • Mise à jour 2: !!window.opr && opr.addons peut être utilisé pour détecter Opera 20+ (à feuilles persistantes).
  • Cligner: CSS.supports()  a été introduit dans Blink Une fois que Google a activé Chrome 28. C'est bien sûr le même Blink utilisé dans Opera.

Testé avec succès dans:

  • Firefox 0.8 - 44
  • Chrome 1.0 - 48
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Edge - 20-25

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


1218
2017-10-14 10:44



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

82
2018-05-13 20:55



Je sais que c'est peut-être exagéré d'utiliser un lib pour cela, mais juste pour enrichir le fil, vous pouvez vérifier is.js façon de faire ceci:

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

49
2017-07-17 15:19



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. Comme le navigateur ne peut pas non plus changer sans recharger, je l'ai fait mettre en cache le résultat pour l'empêcher de fonctionner à la prochaine utilisation de la fonction.

/**
 * 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
2018-01-17 16:27



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

(modifier: 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 navigation, donc 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. La seule exception est Opera, qui repose sur le sniffing de l'agent utilisateur, mais aujourd'hui, même Opera (15 ans et plus), même Opera n'est lui-même qu'un shell pour Blink.


9
2018-01-31 08:12



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'entre eux. Je suis sûr que cela 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.


7
2017-10-25 17:50



Vous pouvez utiliser try et catch utiliser les différents messages d'erreur du navigateur. 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
2018-03-23 03:56