462 votes

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

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

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 s'appuie sur certaines fonctionnalités récemment introduites dans la bibliothèque jQuery, et il y a donc forcément des cas où la version de jQuery d'un client est tout simplement trop ancienne. Nous ne pouvons pas exiger qu'il passe à la dernière version de jQuery.

Existe-t-il un moyen de charger une version plus récente de jQuery pour l'utiliser uniquement dans le contexte de notre code, sans interférer ou affecter le code de 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, charger la version la plus récente pour l'utiliser uniquement dans notre code.

J'ai eu l'idée de charger jQuery dans une <iframe> dans le domaine du client qui comprend aussi notre <script> 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é liées à l'ajout d'une fonction <iframe> s).

1 votes

J'ai rencontré le même problème. Comme je n'ai utilisé jQuery qu'une poignée de fois dans mon script embarqué, j'ai décidé de renoncer complètement à jQuery et de faire simplement ce dont j'avais besoin directement en JavaScript. Ce site : vousn'avezpasbesoindejquery.com a été extrêmement utile.

617voto

ceejayoz Points 85962

Oui, c'est faisable grâce au mode noconflictuel 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(); o jQuery_1_1_3('#selector').function(); .

14 votes

Merci beaucoup, ceejayoz ! Cela semble être 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 (assignant l'ancienne version de jQuery à un alias différent). La façon dont le client utilise jQuery varie et échappe à mon contrôle. Puis-je me contenter d'utiliser la seconde partie en toute sécurité, ou les deux bibliothèques doivent-elles appeler noConflict() ?

7 votes

Oui, vous devriez pouvoir utiliser la seconde moitié.

11 votes

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

96voto

Weird Mike Points 300

Après l'avoir examiné et essayé, j'ai constaté qu'il ne permettait pas à plus d'une instance de jquery de fonctionner à la fois. Après avoir cherché autour de moi, j'ai trouvé ce qui faisait l'affaire et qui était beaucoup moins codé.

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

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

8 votes

Pour éviter de renommer les variables jquery à de nombreux endroits, vous pouvez simplement inclure votre ancien code dans le code suivant : (function($){ })($j)

37voto

Juan Vidal Points 231

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

  • La page originale charge son "jquery.versionX.js" -- $ y jQuery appartiennent à la versionX.
  • Vous appelez votre "jquery.versionY.js" -- maintenant $ y jQuery appartiennent à la versionY, plus _$ y _jQuery appartiennent à la versionX.
  • my_jQuery = jQuery.noConflict(true); -- maintenant $ y jQuery appartiennent à la versionX, _$ y _jQuery sont probablement nuls, et my_jQuery est la versionY.

11 votes

Je n'ai pas compris avant d'avoir consulté le lien. "Lorsque vous chargez votre jQuery.x.x.js, il écrasera les vars $ et jQuery existants... MAIS il en garde une copie de sauvegarde (dans _$ et _jQuery). En appelant noConflict(true) vous restaurez la situation telle qu'elle était avant l'inclusion de votre js"

0 votes

À l'avenir, veuillez être plus explicite sur la référence aux sources externes. Pour plus d'informations, voir stackoverflow.com/help/référencement

24voto

Tomas Kirda Points 3548

Il est possible de charger la deuxième version de jQuery, de l'utiliser puis de revenir à l'original ou de conserver la deuxième version si aucun jQuery n'a été 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>

24voto

martynas Points 3494

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

Utilisez 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 | Source :

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X