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

multiple jquery versions

Question

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.

Answer 1

Absolutamente, sí puedes. Este enlace contiene detalles sobre cómo puede lograrlo: https://api.jquery.com/jquery.noconflict/ .

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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

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