Un projet sur lequel je travaille nécessite l'utilisation de jQuery sur les pages Web des clients. Les clients insèreront un morceau de code que nous fournirons qui comprend quelques <script>éléments qui construisent un widget dans un <script>-created <iframe>. S'ils n'utilisent pas déjà la dernière version de jQuery, cela inclura également (très probablement) un <script>pour la version hébergée de Google de jQuery.

Le problème est que certains clients peuvent déjà avoir une ancienne version de jQuery installée. Bien que cela puisse fonctionner s'il s'agit au moins d'une version assez récente, notre code repose sur certaines fonctionnalités récemment introduites dans la bibliothèque jQuery, il y a donc forcément des cas où la version jQuery d'un client est tout simplement trop ancienne. Nous ne pouvons pas exiger qu'ils passent à la dernière version de jQuery.

Existe-t-il un moyen de charger une version plus récente de jQuery à utiliser uniquement dans le contexte de notre code, qui n'interférera pas ou n'affectera aucun code sur la page du client? Idéalement, nous pourrions peut-être vérifier la présence de jQuery, détecter la version, et si elle est trop ancienne, puis en quelque sorte charger la version la plus récente juste pour l'utiliser pour notre code.

J'ai eu l'idée de charger jQuery dans un <iframe>domaine du client qui inclut également le nôtre <script>, ce qui semble être possible, mais j'espère qu'il existe une manière plus élégante de le faire (sans parler des pénalités de performance et de complexité de extra <iframe>s).

Oui, c'est faisable grâce au mode noconflict de jQuery. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Ensuite, au lieu de $('#selector').function();, vous feriez jQuery_1_3_2('#selector').function();ou jQuery_1_1_3('#selector').function();.

Après avoir regardé cela et l'avoir essayé, j'ai constaté qu'il ne permettait en fait pas à plus d'une instance de jquery de s'exécuter à la fois. Après avoir cherché autour de moi, j'ai trouvé que cela faisait juste l'affaire et était beaucoup moins de code.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>var $j = jQuery.noConflict(true);</script>
    <script>
      $(document).ready(function(){
       console.log($().jquery); // This prints v1.4.2
       console.log($j().jquery); // This prints v1.9.1
      });
   </script>

Alors, ajouter le "j" après le "$" était tout ce que j'avais à faire.

$j(function () {
        $j('.button-pro').on('click', function () {
            var el = $('#cnt' + this.id.replace('btn', ''));
            $j('#contentnew > div').not(el).animate({
                height: "toggle",
                opacity: "toggle"
            }, 100).hide();
            el.toggle();
        });
    });

Tiré de http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

• La page d'origine charge son "jquery.versionX.js" - $et jQueryappartient à la versionX.
• Vous appelez votre "jquery.versionY.js" - maintenant $et jQueryappartenez à versionY, plus _$et _jQueryappartenez à versionX.
• my_jQuery = jQuery.noConflict(true);- maintenant $et jQueryappartiennent à la versionX, _$et _jQuerysont probablement nuls, et my_jQueryest la versionY.

Vous pouvez avoir autant de versions jQuery différentes sur votre page que vous le souhaitez.

Utilisation jQuery.noConflict():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
    alert($i.fn.jquery);
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    alert($j.fn.jquery);
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var $k = jQuery.noConflict();
    alert($k.fn.jquery);
</script> 

DEMO | La source

Il est possible de charger la deuxième version de jQuery, de l'utiliser, puis de restaurer l'original ou de conserver la deuxième version s'il n'y avait pas de jQuery chargé auparavant. Voici un exemple:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    var jQueryTemp = jQuery.noConflict(true);
    var jQueryOriginal = jQuery || jQueryTemp;
    if (window.jQuery){
        console.log('Original jQuery: ', jQuery.fn.jquery);
        console.log('Second jQuery: ', jQueryTemp.fn.jquery);
    }
    window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
    console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
    // Restore original jQuery:
    window.jQuery = window.$ = jQueryOriginal;
    console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>

Je voudrais dire que vous devez toujours utiliser les dernières versions stables ou récentes de jQuery. Cependant, si vous devez travailler avec d'autres versions, vous pouvez ajouter cette version et renommer le $à un autre nom. Par exemple

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>var $oldjQuery = $.noConflict(true);</script>

Regardez ici si vous écrivez quelque chose en utilisant $alors vous obtiendrez la dernière version. Mais si vous avez besoin de faire quoi que ce soit avec l'ancien, utilisez-le à la $oldjQueryplace de $.

Voici un exemple

$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})

Démo

Absolument, oui, vous le pouvez. Ce lien contient des détails sur la façon dont vous pouvez y parvenir: https://api.jquery.com/jquery.noconflict/ .