क्या मैं एक ही पेज पर jQuery के कई संस्करणों का उपयोग कर सकता हूं?

Question

मैं जिस प्रोजेक्ट पर काम कर रहा हूं, उसमें ग्राहकों के वेब पेजों पर jQuery के उपयोग की आवश्यकता है। ग्राहकों कोड है कि हम आपूर्ति करेंगे जो कुछ भी शामिल है का एक हिस्सा डाल देगा <script>तत्वों है कि एक में एक विजेट का निर्माण <script>-created <iframe>। यदि वे पहले से ही jQuery के नवीनतम संस्करण का उपयोग नहीं कर रहे हैं, तो यह <script>Google के jQuery के होस्ट किए गए संस्करण के लिए (सबसे अधिक संभावना) भी शामिल होगा ।

समस्या यह है कि कुछ ग्राहकों के पास पहले से स्थापित jQuery का पुराना संस्करण हो सकता है। जबकि यह काम कर सकता है यदि यह कम से कम हाल ही में संस्करण है, तो हमारा कोड jQuery लाइब्रेरी में हाल ही में पेश की गई कार्यक्षमता पर निर्भर करता है, इसलिए ऐसे उदाहरण हैं जब किसी ग्राहक का jQuery संस्करण अभी बहुत पुराना है। हमें आवश्यकता नहीं है कि वे jQuery के नवीनतम संस्करण में अपग्रेड करें।

क्या हमारे कोड के संदर्भ में उपयोग करने के लिए jQuery के एक नए संस्करण को लोड करने का कोई तरीका है, जो ग्राहक के पेज पर किसी भी कोड के साथ हस्तक्षेप या प्रभावित नहीं करेगा? आदर्श रूप से, शायद हम jQuery की उपस्थिति के लिए जाँच कर सकते हैं, संस्करण का पता लगा सकते हैं, और यदि यह बहुत पुराना है, तो किसी तरह सबसे हाल के संस्करण को हमारे कोड के लिए उपयोग करने के लिए लोड करें।

मेरे पास <iframe>ग्राहक के डोमेन में jQuery लोड करने का विचार था जिसमें हमारा भी शामिल है <script>, जो ऐसा लगता है कि यह संभव हो सकता है, लेकिन मैं उम्मीद कर रहा हूं कि इसे करने के लिए और अधिक सुरुचिपूर्ण तरीका है (प्रदर्शन और जटिलता के दंड के बिना उल्लेख नहीं करना अतिरिक्त <iframe>s)।

Comments

यहाँ noConflict पर विस्तृत पोस्ट है () और कई jQuery लाइब्रेरीज़ का उपयोग करते हुए

— जहीर अहमद

मैं एक समस्या मे फंस गया। चूँकि मैंने अपने एम्बेडेड स्क्रिप्ट में केवल एक बार jQuery का उपयोग किया है, इसलिए मैंने jQuery को पूरी तरह से त्यागने का फैसला किया है और केवल वही कर रहा हूँ जिसकी मुझे सीधे जावास्क्रिप्ट में आवश्यकता थी। यह साइट: youmightnotneedjquery.com बेहद उपयोगी थी।

— फेरुशियो

Answer 1

हाँ, यह jQuery के noconflict मोड के कारण उल्लेखनीय है। 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>

फिर, इसके बजाय $('#selector').function();, आप jQuery_1_3_2('#selector').function();या करेंगे jQuery_1_1_3('#selector').function();।

Comments

बहुत बहुत धन्यवाद, ceejayoz! यह एक व्यवहार्य समाधान जैसा दिखता है - एकमात्र संभावित समस्या यह है कि आपके कोड समाधान के पहले भाग पर मेरा कोई नियंत्रण नहीं है (एक अलग उपनाम के लिए jQuery के पुराने संस्करण को असाइन करना)। ग्राहक jQuery का उपयोग कैसे कर रहा है यह अलग-अलग होगा और मेरे नियंत्रण से बाहर होगा। क्या मैं सुरक्षित रूप से बाद के आधे हिस्से का उपयोग कर सकता हूं, या दोनों पुस्तकालयों को noConflict () को कॉल करने की आवश्यकता है?

— जंगल

हां, आपको बस दूसरे हाफ का उपयोग करने में सक्षम होना चाहिए।

— सिजयोज़

क्या यह वास्तव में मूल पृष्ठ के लिए पारदर्शी है? यदि वे कोड के इस टुकड़े के बाद $ या jQuery का उपयोग करते हैं , तो क्या यह उनके स्वयं के jQuery संस्करण या नए को संदर्भित करेगा (जिसमें संभवतः कम प्लग इन स्थापित है)?

— विम

@ceejayoz, यदि आपके पास एक स्व-आहरण फ़ंक्शन है जो इसके भीतर बहुत सारे $ का उपयोग करता है, तो क्या होता है। हमें उस noconflict सेक्शन के भीतर हर एक $ jquery_1_3_2 को बदलना होगा ???

— क्लेविस

@blachawk नहीं, बस यह उर्फ। (function($) { /*your code here*/ }(jquery_x_x_x));

— फेब्रीको मट्टे

Answer 2

इसे देखने और इसे आजमाने के बाद, मैंने पाया कि यह वास्तव में एक समय में चलने के लिए एक से अधिक जॉकरी की अनुमति नहीं देता है। चारों ओर खोज करने के बाद मैंने पाया कि यह सिर्फ चाल है और एक बहुत कम कोड था।

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

इसलिए "$" के बाद "j" जोड़ना मुझे बस इतना करना था।

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

Comments

इसलिए कई स्थानों में jQuery चर का नाम बदलने से बचने के लिए आप सिर्फ निम्नलिखित अंदर अपने पुराने कोड संलग्न कर सकते हैं:(function($){ })($j)

— मैरिनोस एक

Answer 3

Http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page से लिया गया :

• मूल पृष्ठ उसका "jquery.versionX.js" लोड करता है - $और jQueryसंस्करण x से संबंधित है।
• आप अपने "jquery.versionY.js" को कॉल करते हैं - अब $और jQueryसंस्करण वाई के हैं, प्लस _$और _jQueryसंस्करण एक्स के हैं।
• my_jQuery = jQuery.noConflict(true);- अब $और jQueryversionX से संबंधित हैं, _$और _jQueryशायद अशक्त हैं, और my_jQueryसंस्करण है।

Comments

मुझे तब तक समझ नहीं आया जब तक मैं लिंक पर नहीं गया। "जब आप अपने jQuery.xxjs को लोड करते हैं, तो यह मौजूदा $ और jQuery vars को अधिलेखित कर देगा ... लेकिन यह उनकी (बैकअप में _ $ और _jQuery) की एक बैकअप प्रति रखता है। कॉलिंग noConflict (सच) आप स्थिति को पुनर्स्थापित करते हैं जैसा कि यह पहले था। आपका js समावेश "

— कॉलिन

यहाँ noConflict पर विस्तृत पोस्ट है () और कई jQuery पुस्तकालयों का उपयोग करते हुए

— जहीर अहमद

भविष्य में, कृपया बाहरी स्रोतों को संदर्भित करने के बारे में अधिक स्पष्ट रहें। अधिक जानकारी के लिए, stackoverflow.com/help/referencing

— मैट

Answer 4

आप अपने पेज पर जितने चाहें उतने अलग-अलग jQuery संस्करण रख सकते हैं।

उपयोग करें 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 | स्रोत

Answer 5

यह jQuery के दूसरे संस्करण को लोड करने और फिर मूल में पुनर्स्थापित करने या दूसरे संस्करण को रखने के लिए संभव है, अगर पहले कोई jNet नहीं था। यहाँ एक उदाहरण है:

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

मैं यह कहना चाहूंगा कि आपको हमेशा jQuery के नवीनतम या हाल के स्थिर संस्करणों का उपयोग करना चाहिए। हालाँकि अगर आपको दूसरों के संस्करणों के साथ कुछ काम करने की आवश्यकता है तो आप उस संस्करण को जोड़ सकते हैं और नाम बदलकर $किसी अन्य नाम पर रख सकते हैं । उदाहरण के लिए

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

यहां देखें यदि आप कुछ का उपयोग करके लिखते हैं $तो आपको नवीनतम संस्करण मिलेगा। लेकिन अगर आपको पुराने के साथ कुछ भी करने की आवश्यकता है, तो $oldjQueryइसके बजाय बस का उपयोग करें $।

यहाँ एक उदाहरण है

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

डेमो

Answer 7

बिल्कुल, हाँ आप कर सकते हैं। इस लिंक में विवरण है कि आप इसे कैसे प्राप्त कर सकते हैं: https://api.jquery.com/jquery.noconflict/ ।