version – devfrontend.info

J’ai souhaité utiliser des fonctionnalités de jQuery Mobile, mais cette suite d’outils n’était pas compatible avec la version de jQuery en place dans mon projet (trop récente). La console me remontait une erreur de type:

Uncaught TypeError: Cannot read property "concat" of undefined

1	Uncaught TypeError: Cannot read property "concat" of undefined

Je me suis tourné vers le plug-in jQuery Migrate. jQuery Migrate est disponible en CDN ici. Via Bower, je n’ai pu télécharger que des sources non-exploitables. J’ai donc préféré récupérer le CDN.

Pour utiliser jQuery Migrate, il faut d’abord déclarer la version de jQuery qu’on utilise dans son projet, puis déclarer ensuite le plug-in jQuery Migrate. Exemple:

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

Ici, j’utilise jQuery-3.0.0, mais charger jquery-migrate-3.0.1 (3.0.1 est la version du plug-in, pas le numéro de version de jQuery qui est sensé être simulé) juste après me permettra de rendre compatible du code écrit pour jQuery 1.x ou 2.x.

ATTENTION: seule le version minifiée n’affiche pas de logs dans la console à chaque fois que le script détecte du code JS déprécié.

Edit du 04/10/2017: le plug-in Bowser ayant montré ses limites également, j’ai créé un nouveau billet qui liste les plugins JS de détection de browser, version, OS et les pour et contres d’utilisation.

Edit du 31/08/2017: le plug-in Browser Detection fonctionne très bien mais ne détecte pas le navigateur Microsoft Edge. Se tourner vers Bowser – A Browser detector. Because sometimes, there is no other way, and not even good modern browsers always provide good feature detection mechanisms.

JS Fiddle de demo ici.

Plug-in jQuery browser-detection.js sur GitHub.

Dans l’exemple ci-dessous, on cherche à détecter l’utilisation de Safari et sa version. Pour les versions 8 et antérieures (signifiées par la valeur 600 ou moins en suffixe de la classe safari-* ajoutée à l’élément html par le plug-in browser-detection.js et pour les autres navigateurs, on ne lance pas la fonction maFonction.

    jQuery(document).ready(function(){
        // https://github.com/sub2home/browser-detection
        browserDetection({
          addClasses: true
        });

        function maFonction(){
          // ici, le code de votre fonction
        }

        var isSafari = jQuery('html.safari').length;
        if (isSafari == 1) {
          var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];
          if (getClassValue <= 600){
            // alert('<=600');
            // do nuffin'
          }
          else {
            // alert('>600');
            maFonction();
          }
        }
        else {
          maFonction();
        }
    });

jQuery(document).ready(function(){

// https://github.com/sub2home/browser-detection

browserDetection({

addClasses: true

});

function maFonction(){

// ici, le code de votre fonction

}

var isSafari = jQuery('html.safari').length;

if (isSafari == 1) {

var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

// alert('<=600');

// do nuffin'

}

else {

// alert('>600');

maFonction();

}

else {

maFonction();

}

});

Articles récents

Catégories

Archives

Méta

Étiquette : version

[jQuery] Utiliser jQuery Migrate pour rendre compatible du code écrit pour d’anciennes versions de jQuery avec une version plus récente

[jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else