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).
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();
.
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();
});
});
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 " --
$
ijQuery
należą do versionX. - nazywasz swoje " jquery.versionY.js " -- teraz
$
ijQuery
należą do versionx, plus_$
i_jQuery
należą do versionX. -
my_jQuery = jQuery.noConflict(true);
-- teraz$
ijQuery
należą do versionX,_$
i_jQuery
są prawdopodobnie null, amy_jQuery
są wersjami.
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>
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>
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)})
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/.
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