javascript - multiple - noconflict jquery como usar




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

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

El problema es que es posible que algunos clientes ya tengan 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 algunas de las funciones introducidas recientemente en la biblioteca jQuery, por lo que es probable que haya casos en que la versión jQuery de un cliente sea demasiado antigua. No podemos exigir que se actualicen a la última versión de jQuery.

¿Hay alguna forma de cargar una versión más reciente de jQuery para usar solo dentro del contexto de nuestro código, que no interfiera ni afecte a ningún código en la página del cliente? Lo ideal sería que pudiéramos 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> en el dominio del cliente que también incluye nuestro <script> , lo que parece ser posible, pero espero que haya una forma más elegante de hacerlo (por no mencionar sin las penalizaciones de rendimiento y complejidad de <iframe> s adicionales.



Después de ver 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 alrededor, descubrí que esto solo funcionaba y que había 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, lo único que tenía que hacer era agregar la "j" después de la "$".

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

Me gustaría decir que siempre debe usar las versiones estables recientes o recientes de jQuery. Sin embargo, si necesita trabajar un poco con otras versiones, puede agregar esa versión y cambiar el nombre de $ a 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>

Mira aquí si escribes algo usando $ y obtendrás la última versión. Pero si necesita hacer algo con el antiguo, simplemente use $oldjQuery lugar de $ .

Aquí hay un ejemplo

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

Demo


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

Utilice jQuery.noConflict() :

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

DEMO | Source


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 jQuery pertenecen a versionX.
  • Usted llama a su "jquery.versionY.js": ahora $ y jQuery pertenecen a versionY, más _$ y _jQuery pertenecen a versionX.
  • my_jQuery = jQuery.noConflict(true); - ahora $ y jQuery pertenecen a versionX, _$ y _jQuery son probablemente nulos, y my_jQuery es versionY.




iframe