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




como multiple (7)

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.

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.


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

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

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

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



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

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


La comprobación de la existencia de un elemento se documenta claramente en el sitio web oficial de jQuery.

Use la propiedad .length de la colección jQuery devuelta por su selector:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

Tenga en cuenta que no siempre es necesario probar si existe un elemento. El siguiente código mostrará el elemento si existe y no hará nada (sin errores) si no existe:

$("#myDiv").show();




javascript jquery iframe