web-dev-qa-db-fra.com

Le remplacement le plus facile / le plus léger pour la détection de navigateur jQuery 1.9?

Hier, plusieurs clients se sont plaints du fait que certains codes avaient cessé de fonctionner. Apparemment, cela revient aux plug-ins utilisant le désormais obsolète jQuery.browser, Qui a cessé de fonctionner hier lorsque jQuery 1.9 a été publié.

J'ai (rapidement) examiné les documents de modification 1.9 et il me semble qu'ils veulent que je substitue des bibliothèques assez lourdes rien que pour cela ne fonction.

Existe-t-il un plug-in ou un extrait de code ultra léger recommandé pour restaurer cette fonctionnalité?

Pour ce dont ces sites ont besoin, c'est très basique; Je n'ai besoin que de la détection la plus élémentaire de IE vs FF vs tous les autres.

Suggestions?

jquerybrowser-detection
62
jchwebdev

J'ai utilisé le code suivant répondu par Alexx Roche, mais je voulais détecter MSIE de manière:

<script type="text/javascript">
   $(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
   });
</script>

j'espère que ça aide!

38
Fede

jQuery Migrate était créé pour permettre la compatibilité ascendante pendant la mise à jour de votre code.

https://github.com/jquery/jquery-migrate

En prime, il enregistre les fonctions obsolètes lorsque vous les utilisez. Je voudrais essayer pendant que vous résolvez les problèmes. En outre, vous devez définir une version spécifique de jQuery pour vos sites. C'est bien de mettre à jour, mais assurez-vous de tester ces mises à jour avant de les mettre en production. Si vous utilisez un CDN, vous pouvez toujours spécifier une version spécifique dans le nom du fichier.

Maintenant, vous n'avez pas besoin d'un plugin jQuery pour ce que vous demandez. Départ l'objet navigator .

appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
cookieEnabled: true
doNotTrack: null
geolocation: Geolocation
language: "en-US"
mimeTypes: MimeTypeArray
onLine: true
platform: "MacIntel"
plugins: PluginArray
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
vendor: "Google Inc."
vendorSub: ""
22
Brad
var browser = {
        chrome: false,
        mozilla: false,
        opera: false,
        msie: false,
        safari: false
    };
    var sUsrAg = navigator.userAgent;
    if(sUsrAg.indexOf("Chrome") > -1) {
        browser.chrome = true;
    } else if (sUsrAg.indexOf("Safari") > -1) {
        browser.safari = true;
    } else if (sUsrAg.indexOf("Opera") > -1) {
        browser.opera = true;
    } else if (sUsrAg.indexOf("Firefox") > -1) {
        browser.mozilla = true;
    } else if (sUsrAg.indexOf("MSIE") > -1) {
        browser.msie = true;
    }
    console.log(browser.msie);
20
user989952

Mettez ce code dans votre site (comme un fichier js ou après le code de jQuery ...):

var matched, browser;

// Use of jQuery.browser is frowned upon.
// More details: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch maintained for back-compat
jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};

matched = jQuery.uaMatch( navigator.userAgent );
browser = {};

if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
}

// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
    browser.webkit = true;
} else if ( browser.webkit ) {
    browser.safari = true;
}

jQuery.browser = browser;
11
Synthy

J'ai utilisé le code suivant lorsque je rencontre le même problème:

<script type="text/javascript">
 $(document).ready(function() {
    //if (!$.browser.webkit && ! $.browser.mozilla) { //depricated
    if (!navigator.userAgent.match(/mozilla/i) && 
        ! navigator.userAgent.match(/webkit/i) ){
        alert('Let me tell you about Mozilla');
    }
 });
</script>
10
Alexx Roche

Vous pouvez simplement ne pas mettre à jour tant que vous n’abandonnez pas les méthodes amorties.

Vous ne devriez vraiment pas inclure jquery à partir d'un CDN sans spécifier de toute façon un numéro de version, car cela irait à l'encontre de l'objectif d'utiliser un CDN (pas de cache).

Voici un lien vers la dernière version de jQuery prenant en charge $ .browser:

http://code.jquery.com/jquery-1.8.3.min.js

remplacez simplement votre src jquery.js par ce lien et votre code continuera à s'exécuter jusqu'à ce que vous soyez prêt à avancer et à cesser d'utiliser les fonctionnalités amorties.

Remarque: Fancybox2 utilise toujours $ .browser, c'est le fichier le plus courant que j'ai vu depuis la mise à jour.

Mise à jour: Slickgrid utilise toujours $.browser, pas de mise à jour au 02/11/2013

6
Kevin B

J'ai résumé la logique de jQuery.browser dans un plugin jquery.browser . Le plugin est publié sous la licence MIT).

J'ai également ajouté le support pour IE11, Opera Webkit et Android détection.

6
Gabriel Cebrian

Essayez Conditionizr

J'espère que cela t'aides :)

2
Ijas Ameenudeen

La version exacte de IE peut être détectée par une vérification supplémentaire de l'existence d'objets globaux standard ajoutés dans des versions spécifiques IE.

10 or older document.all
9 or older  document.all && !window.atob
8 or older  document.all && !document.addEventListener
7 or older  document.all && !document.querySelector
6 or older  document.all && !window.XMLHttpRequest
5.x document.all && !document.compatMode

if (document.all && !document.querySelector) {
    alert('IE7 or lower');
}

Ces tests évitent d’utiliser l’agent d’utilisation utilisé pour l’usurpation

2
Vincent Gloaguen
if(!$.browser){
    $.browser={chrome:false,mozilla:false,opera:false,msie:false,safari:false};
    var ua=navigator.userAgent;
        $.each($.browser,function(c,a){
        $.browser[c]=((new RegExp(c,'i').test(ua)))?true:false;
            if($.browser.mozilla && c =='mozilla'){$.browser.mozilla=((new RegExp('firefox','i').test(ua)))?true:false;};
            if($.browser.chrome && c =='safari'){$.browser.safari=false;};
        });
};

http://jsfiddle.net/R3AAX/3/

1
etb

Court et pourtant puissant.

// chrome, safari, webkit, mozilla, msie, opera
var chrome = /chrome/i.test(navigator.userAgent);
1
Victor M

Si tout ce que vous voulez, c'est que vos plugins jQuery tiers puissent utiliser jQuery.browser.msie, voici un one-liner. Il suffit de l'inclure après jQuery.

jQuery.browser = jQuery.browser || {msie: navigator.userAgent.match(/msie/i) ? true : false};

C’est la solution la plus stupide possible, mais c’est tout ce dont j’avais besoin, et ça marche, alors voilà!

1
Ben Hull

Pour ajouter à cette discussion. Je viens juste de créer un plugin jquery $ .browser qui, au lieu de "détection", analyse simplement l'agent utilisateur en un objet facile à utiliser. Une logique supplémentaire peut facilement être appliquée pour décomposer et analyser davantage des navigateurs et des plates-formes spécifiques.

J'ai eu des résultats très fiables sur les useragents trouvés ici: UserAgentString.com . J'ai même inclus la détection de version pour ie11 (près du bas).

//The following code is by no means perfect, nor is it meant to be a standalone 'detection' plugin. 
//It demonstrates parsing the useragent string into an easy to manage object. 
//Even if it does make detection rediculously easy.. :)

//Because this regex makes no assumptions in advance.
//IMO, It's compatibilty and maintainability is much higher than those based on static identifiers.

/*
  uaMatch replacement that parses a useragent string into an object
  useragent segments can be Name Value OR Name/Value OR Name

  Segment: Name Value
    Name: parsed to the last whitespace character
    Value: value after the last whitespace character
    Matches: (.NET CLR) (#.##), Android 2.3.4, etc
    Note: this regex can have leading/trailing whitespace (trimmed for object properties)

  Segment: Name/Value
    Matches: all values matching Name/Value
    Example: Firefox/24.0, Safari/533.1, Version/12.1, etc

  Segment: Name
    Matches: identifiers that hold no values (value of 'true' is implied)
    Example: Macintosh, Linux, Windows, KHTML, U, etc


   WARNING: not necessarily compatible with jQuery's $.browser implementation.
   - not recommended as a replacement for plugins that require it to function.
*/
(function ($) {

    var ua = navigator.userAgent.toLowerCase();

    var regex = /compatible; ([\w.+]+)[ \/]([\w.+]*)|([\w .+]+)[: \/]([\w.+]+)|([\w.+]+)/g;
    var match = regex.exec(ua);

    var browser = { };

    while (match != null) {
        var prop = {};

        if (match[1]) {
          prop.type = match[1];
          prop.version = match[2];
        }
        else if (match[3]) {
          prop.type = match[3];
          prop.version = match[4];
        }
        else {
          prop.type = match[5];
        }

        // some expressions have leading whitespace (i couldn't avoid this without a more complex expression)
        // trim them and get rid of '.' (' .NET CLR' = 'net_clr') 
        prop.type = $.trim(prop.type).replace(".","").replace(" ","_"); 
        var value = prop.version ? prop.version : true;

        if (browser[prop.type]) {
            if (!$.isArray(browser[prop.type]))
                browser[prop.type] = new Array(browser[prop.type]);

            browser[prop.type].Push(value);
        }    
        else browser[prop.type] = value;

        match = regex.exec(ua);
    }

    for (var i in browser)
        if (i.indexOf("mac") > -1)
            browser.mac = true;

    if (browser.windows_nt && !browser.windows)
        browser.windows = true;

    //put known browsers into the 'version' property for 'some' jquery compatibility

    //for sake of argument chromium 'is' chrome
    if (browser.chromium && !browser.chrome)
        browser.chrome = browser.chromium;

    //chrome / safari / webkit
    if (browser.chrome) {
        browser.version = browser.chrome;
    }
    else if (browser.safari) {
        browser.version = browser.safari;
    }
    else {
        if (browser.applewebkit)
            browser.webkit = browser.applewebkit;

        if (browser.webkit)
            browser.version = browser.webkit;
    }

    //firefox / gecko
    if (browser.firefox) {
        if (browser.rv)
            browser.version = browser.rv;

        else browser.version = browser.firefox;
    }
    else if (browser.gecko) {
        if (browser.rv)
            browser.version = browser.rv;

        else browser.version = browser.gecko;
    }

    //opera
    if (browser.opera && !browser.version)
        browser.version = browser.opera;

    //msie
    if (browser.trident && browser.rv) //ie11
        browser.msie = browser.rv;

    if (browser.msie)
        browser.version = browser.msie;

    $.browser = browser;//Rename to reduce confliction?

    //WAS USED FOR TESTING & DISCOVERY (very useful)
    //TODO: remove line below
    alert(JSON.stringify($.browser));

}) (jQuery);

Sur Internet Explorer 10, JSON.stringify produira quelque chose comme ceci:

{"mozilla":"5.0","msie":"10.0","windows_nt":"6.2","trident":"6.0","net4.0e":true,"net4.0c":true,"net_clr":["3.5.30729","2.0.50727","3.0.30729"],"windows":true,"version":"10.0"}
1
SilverX