Czy mogę korzystać z wielu wersji jQuery na tej samej stronie?

Question

Projekt, nad którym pracuję, wymaga użycia jQuery na stronach internetowych klientów. Klienci wstawią fragment kodu, który dostarczymy, zawierający kilka elementów <script>, które budują widżet w <script> -utworzonym . Jeśli nie używają najnowszej wersji jQuery, będzie to również (najprawdopodobniej) wersja <script> dla hostowanej wersji jQuery Google.

Problem polega na tym, że niektórzy klienci mogą mieć już starszą wersję jQuery. Chociaż może to działać, jeśli jest to przynajmniej dość aktualna wersja, nasz kod opiera się na niedawno wprowadzonej funkcjonalności w bibliotece jQuery, więc istnieją przypadki, gdy wersja jQuery klienta jest zbyt stara. Nie możemy wymagać aktualizacji do najnowszej wersji jQuery.

Czy istnieje sposób na załadowanie nowszej wersji jQuery do użycia tylko w kontekście naszego kodu, który nie będzie zakłócać ani wpływać na jakikolwiek kod na stronie klienta? Idealnie, może moglibyśmy sprawdzić obecność jQuery, wykryć wersję, a jeśli jest za stara, to jakoś załadować najnowszą wersję, aby użyć jej do naszego kodu.

Wpadłem na pomysł załadowania jQuery do domeny w domenie klienta, która obejmuje również naszą <script>, co wydaje się być wykonalne, ale mam nadzieję, że jest bardziej elegancki sposób na to (nie wspominając bez kary za wydajność i złożoność dodatkowych s.).

Answer 1

Tak, jest to możliwe ze względu na tryb noconflict 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> 

Następnie zamiast $('#selector').function();, że zrobisz jQuery_1_3_2('#selector').function(); lub jQuery_1_1_3('#selector').function();.

Answer 2

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

• Oryginalna strona ładuje swoje "jquery.versionX.js" - $ i jQuery należą do versionX.
• Nazywasz swoje "jquery.versionY.js" - teraz $ i jQuery należą do wersjiY, plus _$ i _jQuery należą do wersjiX.
• my_jQuery = jQuery.noConflict(true); - teraz $ i jQuery należą do versionX, _$ i _jQuery prawdopodobnie null, a my_jQuery jest versionY.

Answer 3

Możliwe jest załadowanie drugiej wersji jQuery, a następnie przywrócenie oryginału lub zachowanie drugiej wersji, jeśli wcześniej nie załadowano jQuery. Oto przykład:

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

Answer 4

Po obejrzeniu tego i próbuje ją znalazłem to faktycznie nie pozwala więcej niż jedna instancja jQuery uruchomić jednocześnie. Po przeszukiwaniu stwierdziłem, że to wystarczyło i było o wiele mniej kodu.

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

Więc dodanie "j" po "$" było wszystko, co potrzebne do zrobienia.

Answer 5

Możesz mieć tyle różnych wersji jQuery na swojej stronie, ile chcesz.

Zastosowanie 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

Answer 6

Chciałbym powiedzieć, że zawsze należy używać najnowszych lub najnowszych stabilnych wersji jQuery. Jeśli jednak chcesz wykonać pewne prace z innymi wersjami, możesz dodać tę wersję i zmienić nazwę na $ na inną nazwę. Na przykład

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

Zajrzyj tutaj, jeśli coś napisać korzystając $ wtedy dostaniesz najnowszą wersję. Ale jeśli chcesz zrobić coś ze starym, po prostu użyj $oldjQuery zamiast $.

Oto przykład

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

Demo

Answer 7

Absolutnie tak można. Ten link zawiera szczegółowe informacje na temat tego, jak możesz to osiągnąć: https://api.jquery.com/jquery.noconflict/.