Puis-je utiliser plusieurs versions de jQuery sur la même page?


428

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



1
J'ai rencontré le même problème. Comme je n'ai utilisé jQuery qu'une poignée de fois dans mon script intégré, j'ai décidé de renoncer à jQuery et de faire simplement ce dont j'avais besoin directement en JavaScript. Ce site: youmightnotneedjquery.com était extrêmement utile.
Ferruccio

Réponses:


578

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();.


13
Merci beaucoup, ceejayoz! Cela ressemble à une solution viable - le seul problème potentiel est que je n'ai aucun contrôle sur la première partie de votre solution de code (en affectant l'ancienne version de jQuery à un autre alias). La façon dont le client utilise jQuery varie et est hors de mon contrôle. Puis-je utiliser en toute sécurité la dernière moitié ou les deux bibliothèques doivent-elles appeler noConflict ()?
Bungle

7
Oui, vous devriez pouvoir utiliser uniquement la seconde moitié.
ceejayoz

9
Est-ce vraiment transparent pour la page d'origine? S'ils utilisent $ ou jQuery après ce morceau de code, cela ferait-il référence à leur propre version de jQuery ou à la plus récente (qui a peut-être moins de plugins installés)?
Wim

2
@ceejayoz, que se passe-t-il si vous avez une fonction auto-invoquante qui utilise beaucoup de $ en elle. Nous devrions changer chaque $ en jquery_1_3_2, dans cette section de non-conflit ???
klewis

37
@blachawk Non, alias juste ça. (function($) { /*your code here*/ }(jquery_x_x_x));
Fabrício Matté

85

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();
        });
    });

6
Pour éviter de renommer la variable jquery dans tant d'endroits, vous pouvez simplement enfermer votre ancien code à l'intérieur de ce qui suit:(function($){ })($j)
Marinos Un

36

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.

9
Je n'ai pas compris jusqu'à ce que j'aille sur le lien. "Lorsque vous chargez votre jQuery.xxjs, il écrase les variables $ et jQuery existantes ... MAIS il en conserve une copie de sauvegarde (dans _ $ et _jQuery). En appelant noConflict (true), vous restaurez la situation telle qu'elle était avant votre inclusion js "
Colin


À l'avenir, veuillez être plus explicite sur le référencement des sources externes. Pour plus d'informations, voir stackoverflow.com/help/referencing
Matt

23

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


23

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>

5

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


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.