2009-10-14 29 views
351

Un progetto su cui sto lavorando richiede l'uso di jQuery nelle pagine Web dei clienti. I clienti inseriranno un frammento di codice che forniremo che include alcuni elementi <script> che creano un widget in un <script> -creato . Se non stanno già utilizzando l'ultima versione di jQuery, questo includerà anche (molto probabilmente) uno <script> per la versione ospitata da Google di jQuery.Posso utilizzare più versioni di jQuery nella stessa pagina?

Il problema è che alcuni clienti potrebbero già avere una versione precedente di jQuery installata. Anche se questo potrebbe funzionare se è almeno una versione abbastanza recente, il nostro codice si basa su alcune funzionalità introdotte di recente nella libreria jQuery, quindi ci sono necessariamente istanze in cui la versione jQuery di un cliente è troppo vecchia. Non possiamo richiedere che eseguano l'aggiornamento all'ultima versione di jQuery.

C'è un modo per caricare una versione più recente di jQuery da utilizzare solo nel contesto del nostro codice, che non interferirà con o influirà su alcun codice sulla pagina del cliente? Idealmente, forse potremmo verificare la presenza di jQuery, rilevare la versione e, se è troppo vecchia, caricare in qualche modo la versione più recente solo per il nostro codice.

Ho avuto l'idea di caricare jQuery in un nel dominio del cliente che include anche il nostro <script>, che sembra possa essere fattibile, ma spero che ci sia un modo più elegante per farlo (per non parlare senza le penalità relative a prestazioni e complessità di extra s).

+5

[Ecco un post dettagliato su noConflict() e utilizzando più librerie jQuery] (http://conceptf1.blogspot.com/2013/12/conflict-in-multiple-jquery-files-on-same-page.html) –

+1

Mi sono imbattuto nello stesso problema. Dato che ho usato jQuery solo una manciata di volte nel mio script incorporato, ho deciso di rinunciare a jQuery del tutto e di fare semplicemente ciò di cui avevo bisogno direttamente in JavaScript. Questo sito: http://youmightnotneedjquery.com/ è stato estremamente utile. – Ferruccio

risposta

480

Sì, è fattibile a causa della modalità noconflict di 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> 

Poi, invece di $('#selector').function();, faresti jQuery_1_3_2('#selector').function(); o jQuery_1_1_3('#selector').function();.

+10

Grazie mille, ceejayoz! Sembra una soluzione valida: l'unico problema potenziale è che non ho alcun controllo sulla prima parte della soluzione del codice (assegnando la versione precedente di jQuery a un alias diverso). Il modo in cui il cliente utilizza jQuery varierà e sarà fuori dal mio controllo. Posso tranquillamente usare la seconda metà, o entrambe le librerie devono chiamare noConflict()? – Bungle

+7

Sì, dovresti essere in grado di usare solo la seconda metà. – ceejayoz

+9

È davvero trasparente per la pagina originale? Se usano $ o jQuery * dopo * questa parte di codice, farebbero riferimento alla loro versione di jQuery o più recente (che probabilmente ha un minor numero di plug-in installati)? – Wim

26

Tratto da http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:

  • pagina originale carica i suoi "jquery.versionX.js" - $ e jQuery appartengono alla versionX.
  • Chiami il tuo "jquery.versionY.js" - ora $ e jQuery appartengono alla versioneY, più _$ e _jQuery appartengono alla versioneX.
  • my_jQuery = jQuery.noConflict(true); - ora $ e jQuery appartengono a versionX, _$ e _jQuery sono probabilmente nullo, e my_jQuery è versionY.
+7

Non ho capito fino a quando sono andato al link. "Quando carichi il tuo jQuery.xxjs, sovrascriverà i $ e jQuery vars esistenti ... MA ne conserverà una copia di backup (in _ $ e _jQuery). Chiamando noConflict (true) ripristini la situazione in quanto era prima della tua inclusione js " – Colin

+2

[Ecco un post dettagliato su noConflict() e utilizzando più librerie jQuery] (http://conceptf1.blogspot.com/2013/12/conflict-in-multiple-jquery-files-on-same -page.html) –

+0

In futuro, si prega di essere più espliciti sul riferimento a fonti esterne. Per ulteriori informazioni, consultare http://stackoverflow.com/help/referencing – Matt

17

È possibile caricare la seconda versione di jQuery, utilizzarlo e quindi ripristinare l'originale o mantenere la seconda versione se prima non era stato caricato jQuery. Ecco un esempio:

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

Dopo aver guardato questo e provarlo ho scoperto che in realtà non permetteva più di un'istanza di jQuery per eseguire in un momento. Dopo aver cercato in giro ho scoperto che questo ha fatto solo il trucco ed era un codice molto meno.

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

Allora aggiungendo la "j" dopo il "$" è stato tutto quello che dovevo fare.

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

È possibile avere tante versioni jQuery diverse nella pagina che si desidera.

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

| Source

2

Vorrei dire che è necessario utilizzare sempre le versioni stabili recenti o recenti di jQuery. Tuttavia, se hai bisogno di lavorare con altre versioni, puoi aggiungere quella versione e rinominare lo $ con un altro nome. Per esempio

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

Guardate qui se si scrive qualcosa usando $ allora si otterrà l'ultima versione. Ma se hai bisogno di fare qualcosa con i vecchi allora usa solo $oldjQuery invece di $.

Ecco un esempio

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

Demo

Problemi correlati