web-dev-qa-db-fra.com

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 inséreront un bloc de code que nous fournirons, qui comprend quelques éléments <script> qui construisent un widget dans un <script>- créé <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 jQuery par Google.

Le problème est que certains clients peuvent déjà avoir une version plus ancienne de jQuery installée. Bien que cela puisse fonctionner s'il s'agit au moins d'une version relativement récente, notre code repose sur certaines fonctionnalités récemment introduites dans la bibliothèque jQuery. Il est donc bien probable que 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 ni 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, charger de toute façon la version la plus récente à utiliser pour notre code.

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

javascriptjqueryiframe
407
Bungle

Oui, c'est faisable en raison du mode sans conflit 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();.

550
ceejayoz

Après avoir examiné cela et l'avoir essayé, j'ai constaté qu'il ne permettait en réalité pas plus d'une instance de jQuery à exécuter à la fois. Après avoir cherché autour de moi, j'ai trouvé que c'était exactement ce qu'il fallait et que c'é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>

Donc, ajouter le "j" après le "$" était tout ce que je devais 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();
        });
    });
82
Weird Mike

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

  • La page d'origine charge ses "jquery.versionX.js" - $ et jQuery appartiennent à la versionX.
  • Vous appelez votre "jquery.versionY.js" - maintenant $ et jQuery appartiennent à la versionY, plus _$ et _jQuery appartiennent à la versionX.
  • my_jQuery = jQuery.noConflict(true); - maintenant $ et jQuery appartiennent à la version X, _$ et _jQuery sont probablement nuls et my_jQuery est la versionY.
34
Juan Vidal

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>

DÉMO | Source

22
martynas

Il est possible de charger la deuxième version de jQuery, de l’utiliser puis de restaurer la version originale ou de conserver la deuxième version si jQuery n’avait pas é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>
22
Tomas Kirda

Je voudrais dire que vous devez toujours utiliser les versions stables les plus récentes ou les plus récentes de jQuery. Toutefois, si vous devez travailler avec d'autres versions, vous pouvez ajouter cette version et renommer le $ sous 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 devez faire quelque chose avec old, utilisez simplement $oldjQuery au lieu de $.

Voici un exemple

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

démo

5
gdmanandamohon

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

2
Jaime Montoya