¿Puedo usar varias versiones de jQuery en la misma página?


428

Un proyecto en el que estoy trabajando requiere el uso de jQuery en las páginas web de los clientes. Los clientes insertarán un fragmento de código que proporcionaremos, que incluye algunos <script>elementos que compilan un widget en un <script>archivo creado <iframe>. Si aún no están utilizando la última versión de jQuery, esto también incluirá (muy probablemente) una <script>para la versión alojada de Google de jQuery.

El problema es que algunos clientes ya pueden tener instalada una versión anterior de jQuery. Si bien esto puede funcionar si es al menos una versión bastante reciente, nuestro código se basa en alguna funcionalidad recientemente introducida en la biblioteca jQuery, por lo que seguramente habrá casos en que la versión jQuery de un cliente sea demasiado antigua. No podemos exigir que actualicen a la última versión de jQuery.

¿Hay alguna forma de cargar una versión más nueva de jQuery para usar solo dentro del contexto de nuestro código, que no interfiera con, ni afecte, ningún código en la página del cliente? Idealmente, tal vez podríamos verificar la presencia de jQuery, detectar la versión y, si es demasiado antigua, cargar de alguna manera la versión más reciente para usarla en nuestro código.

Tuve la idea de cargar jQuery en un <iframe>dominio del cliente que también incluye nuestro <script>, lo que parece posible, pero espero que haya una forma más elegante de hacerlo (sin mencionar las penalizaciones de rendimiento y complejidad de extra <iframe>s).



1
Tuve el mismo problema. Como solo utilicé jQuery varias veces en mi script incrustado, decidí renunciar a jQuery por completo y simplemente hacer lo que necesitaba directamente en JavaScript. Este sitio: youmightnotneedjquery.com fue extremadamente útil.
Ferruccio

Respuestas:


578

Sí, es factible debido al modo sin conflicto 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>

Entonces, en lugar de $('#selector').function();, lo harías jQuery_1_3_2('#selector').function();o jQuery_1_1_3('#selector').function();.


13
Muchas gracias, ceejayoz! Parece una solución viable: el único problema potencial es que no tengo ningún control sobre la primera parte de su solución de código (asignar la versión anterior de jQuery a un alias diferente). La forma en que el cliente usa jQuery variará y está fuera de mi control. ¿Puedo usar la última mitad de forma segura o ambas bibliotecas deben llamar a noConflict ()?
Bungle

77
Sí, deberías poder usar la segunda mitad.
ceejayoz

99
¿Es esto realmente transparente para la página original? Si usan $ o jQuery después de este código, ¿se referiría a su propia versión jQuery o la más nueva (que posiblemente tenga menos complementos instalados)?
Wim

2
@ceejayoz, ¿qué sucede si tiene una función de invocación automática que utiliza muchos $ dentro de ella? ¿Tendríamos que cambiar cada $ a jquery_1_3_2, dentro de esa sección sin conflicto?
klewis

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

85

Después de mirar esto y probarlo, descubrí que en realidad no permitía que se ejecutara más de una instancia de jquery a la vez. Después de buscar, descubrí que esto funcionaba bien y que era mucho menos código.

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

Entonces, agregar la "j" después de "$" fue todo lo que necesitaba hacer.

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

66
Para evitar cambiar el nombre de la variable jquery en tantos lugares, puede encerrar su antiguo código dentro de lo siguiente:(function($){ })($j)
Marinos un

36

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

  • La página original carga su "jquery.versionX.js" $y jQuerypertenece a versionX.
  • Llamas a tu "jquery.versionY.js" - ahora $y jQueryperteneces a versionY, plus _$y _jQueryperteneces a versionX.
  • my_jQuery = jQuery.noConflict(true);- ahora $y jQuerypertenece a la versión X, _$y _jQueryprobablemente sea nulo, y my_jQueryes la versiónY.

99
No entendí hasta que fui al enlace. "Cuando carga su jQuery.xxjs, sobrescribirá los $ y jQuery vars existentes ... PERO mantiene una copia de seguridad de ellos (en _ $ y _jQuery). Al llamar a noConflict (true) restaura la situación como estaba antes su inclusión js "
Colin


En el futuro, sea más explícito al hacer referencia a fuentes externas. Para obtener más información, consulte stackoverflow.com/help/referencing
Matt

23

Puede tener tantas versiones diferentes de jQuery en su página como desee.

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> 

DEMO | Fuente


23

Es posible cargar la segunda versión de jQuery, usarla y luego restaurarla a la original o conservar la segunda versión si no se cargó jQuery antes. Aquí hay un ejemplo:

<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

Me gustaría decir que siempre debe usar jQuery últimas o recientes versiones estables. Sin embargo, si necesita trabajar con otras versiones, puede agregar esa versión y cambiarle el $nombre por otro nombre. Por ejemplo

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

Mire aquí si escribe algo usando $y obtendrá la última versión. Pero si necesita hacer algo con viejo, simplemente use en $oldjQuerylugar de $.

Aquí hay un ejemplo

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

Manifestación


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.