Czy Mogę używać wielu wersji jQuery na tej samej stronie?

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

Problem polega na tym, że niektórzy klienci mogą mieć już zainstalowaną starszą wersję jQuery. Chociaż to może działać, jeśli jest na co najmniej w dość niedawnej wersji, nasz kod opiera się na niedawno wprowadzonych funkcjach w bibliotece jQuery, więc z pewnością zdarzają się przypadki, gdy wersja jQuery klienta jest po prostu zbyt stara. Nie możemy wymagać aktualizacji do najnowszej wersji jQuery.

Czy jest jakiś sposób, aby załadować nowszą wersję jQuery, aby używać tylko w kontekście naszego kodu, który nie będzie zakłócał lub wpływał na żaden kod na stronie klienta? Najlepiej, może moglibyśmy sprawdzić obecność jQuery, Wykryj wersję, a jeśli jest za stara, to jakoś załaduj najnowszą wersję, aby użyć naszego kodu.

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

Author: Tshepang, 2009-10-14

7 answers

Tak, jest to wykonalne 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>

Wtedy zamiast $('#selector').function();, zrobiłbyś jQuery_1_3_2('#selector').function(); lub jQuery_1_1_3('#selector').function();.

 520
Author: ceejayoz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-14 14:27:11

Po obejrzeniu tego i wypróbowaniu okazało się, że w rzeczywistości nie pozwala na uruchamianie więcej niż jednej instancji jquery na raz. Po przeszukaniu okazało się, że to tylko sztuczka i było dużo 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 wszystkim, co musiałem zrobić.

$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();
        });
    });
 71
Author: Weird Mike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-09 22:59:21

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

  • oryginalna strona ładuje swój " jquery.versionX.js " -- $ i jQuery należą do versionX.
  • nazywasz swoje " jquery.versionY.js " -- teraz $ i jQuery należą do versionx, plus _$ i _jQuery należą do versionX.
  • my_jQuery = jQuery.noConflict(true); -- teraz $ i jQuery należą do versionX, _$ i _jQuery są prawdopodobnie null, a my_jQuery są wersjami.
 29
Author: Juan Vidal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-01 12:23:23

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

Użycie 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 | Źródło

 21
Author: martynas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:41

Możliwe jest załadowanie drugiej wersji jQuery użyj jej, a następnie Przywróć do oryginalnej lub zachowaj drugą wersję, jeśli wcześniej nie było wczytywanego 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>
 20
Author: Tomas Kirda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-14 00:03:10

Chciałbym powiedzieć, że musisz zawsze używać jQuery najnowsze lub najnowsze stabilne wersje. Jeśli jednak musisz wykonać jakąś pracę z innymi wersjami, możesz dodać tę wersję i zmienić nazwę $ 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>

Spójrz tutaj jeśli napiszesz coś używając {[2] } wtedy otrzymasz najnowszą wersję. Ale jeśli chcesz coś zrobić ze starym, po prostu użyj $oldjQuery zamiast $.

Oto przykład

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

Demo

 4
Author: gdmanandamohon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-30 08:48:13

Oczywiście, że możesz. Ten link zawiera szczegółowe informacje o tym, jak możesz to osiągnąć: https://api.jquery.com/jquery.noconflict/.

 1
Author: Jaime Montoya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-11 23:46:35