আমি কি একই পৃষ্ঠায় jQuery এর একাধিক সংস্করণ ব্যবহার করতে পারি?


426

যে প্রকল্পে আমি কাজ করছি তার জন্য গ্রাহকদের ওয়েব পৃষ্ঠাগুলিতে jQuery ব্যবহার করা দরকার। গ্রাহকরা কোড সরবরাহ করবেন যা আমরা সরবরাহ করব যাতে এমন কয়েকটি <script>উপাদান রয়েছে যা একটি <script>ক্রাইটেডে একটি উইজেট তৈরি করে <iframe>। যদি তারা ইতিমধ্যে jQuery এর সর্বশেষতম সংস্করণ ব্যবহার না করে থাকে তবে এর মধ্যে <script>গুগলের হোস্ট করা সংস্করণ jQuery এর (সম্ভবত খুব বেশি) একটিও অন্তর্ভুক্ত থাকবে।

সমস্যাটি হ'ল কিছু গ্রাহকের ইতিমধ্যে jQuery এর একটি পুরানো সংস্করণ ইনস্টল থাকতে পারে। এটি যদি কমপক্ষে মোটামুটি সাম্প্রতিকতম সংস্করণ হয় তবে এটি কার্যকর হতে পারে, তবে আমাদের কোডটি jQuery লাইব্রেরিতে সম্প্রতি চালু হওয়া কিছু কার্যকারিতার উপর নির্ভর করে, সুতরাং যখন কোনও গ্রাহকের jQuery সংস্করণটি খুব পুরানো হয় তখন উদাহরণ থাকতে হবে। আমাদের প্রয়োজন হয় না যে তারা jQuery এর সর্বশেষতম সংস্করণে আপগ্রেড করবে।

আমাদের কোডের প্রসঙ্গে কেবল jQuery এর নতুন সংস্করণটি লোড করার কোনও উপায় আছে, যা গ্রাহকের পৃষ্ঠায় কোনও কোডকে হস্তক্ষেপ করবে না বা প্রভাবিত করবে না? আদর্শভাবে, সম্ভবত আমরা jQuery উপস্থিতি যাচাই করতে পারি, সংস্করণটি সনাক্ত করতে এবং এটি যদি খুব পুরানো হয় তবে কোনওভাবে আমাদের কোডের জন্য ব্যবহার করার জন্য সাম্প্রতিকতম সংস্করণটি লোড করতে পারি।

আমার কাছে <iframe>গ্রাহকের ডোমেনে jQuery লোড করার ধারণা ছিল যা আমাদেরও অন্তর্ভুক্ত করে <script>, যা সম্ভবত এটি সম্ভবপর বলে মনে হয়, তবে আমি আশা করি এটি করার আরও একটি দুর্দান্ত উপায় আছে (এর কার্য সম্পাদন এবং জটিলতার জরিমানা ব্যতীত উল্লেখ না করা) অতিরিক্ত <iframe>গুলি)



1
আমি একই সমস্যা মধ্যে দৌড়ে। যেহেতু আমি কেবলমাত্র আমার এম্বেড স্ক্রিপ্টে বেশ কয়েকবার jQuery ব্যবহার করেছি, তাই আমি jQuery সম্পূর্ণভাবে অগ্রাহ্য করার সিদ্ধান্ত নিয়েছিলাম এবং কেবল জাভাস্ক্রিপ্টে আমার যা প্রয়োজন তা করলাম। এই সাইট: youmightnotneedjquery.com অত্যন্ত কার্যকর ছিল।
ফেরুকসিও

উত্তর:


578

হ্যাঁ, 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();


13
অনেক ধন্যবাদ, সিজেজোজ! এটি একটি কার্যকর ব্যবহারযোগ্য সমাধানের মতো দেখায় - কেবলমাত্র সম্ভাব্য সমস্যাটি হ'ল আপনার কোড সমাধানের প্রথম অংশের উপর আমার কোনও নিয়ন্ত্রণ নেই (jQuery এর পুরানো সংস্করণটি অন্য কোনও উপাধিতে নির্ধারণ করা)। গ্রাহক কীভাবে jQuery ব্যবহার করছেন তা পরিবর্তিত হবে এবং আমার নিয়ন্ত্রণের বাইরে। আমি কি নিরাপদে কেবল উত্তরার্ধটি ব্যবহার করতে পারি, বা উভয় লাইব্রেরিতেই ননকনফ্লিক্ট () কল করতে হবে?
চরম বিশৃঙ্খল

7
হ্যাঁ, আপনি কেবল দ্বিতীয়ার্ধটি ব্যবহার করতে সক্ষম হবেন।
ceejayoz

9
এটি কি মূল পৃষ্ঠায় স্বচ্ছ? যদি তারা এই টুকরা কোডের পরে $ বা jQuery ব্যবহার করে , তবে এটি কি তাদের নিজস্ব jQuery সংস্করণ বা নতুনতর (সম্ভবত সম্ভবত কম প্লাগইন ইনস্টল করা আছে) উল্লেখ করবে?
উইম

2
@ceejayoz, যদি আপনার মধ্যে একটি স্ব-চালিত ফাংশন থাকে যা এর মধ্যে অনেকগুলি ব্যবহার করে what আমাদের প্রতিটি একককে j jquery_1_3_2 এ পরিবর্তন করতে হবে, সেই নোকনফ্লিক্ট বিভাগের মধ্যে ???
ক্লিভিস

37
@ ব্লাচউক না, কেবল এটির নাম। (function($) { /*your code here*/ }(jquery_x_x_x));
ফ্যাব্রিসিও ম্যাট

85

এটি দেখে এবং এটি চেষ্টা করে দেখতে পেলাম যে এটি আসলে এক সময়ে jquery এর একাধিক উদাহরণ চালানোর অনুমতি দেয় না। আশেপাশে অনুসন্ধানের পরে আমি দেখতে পেলাম যে এটি কেবল কৌশলটি করেছে এবং এটি সম্পূর্ণ অনেক কম কোড।

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

সুতরাং "" after "এর পরে" জে "যুক্ত করা আমার যা করার দরকার তা ছিল।

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

6
অনেক জায়গায় jquery ভেরিয়েবলের নাম পরিবর্তন এড়াতে আপনি কেবল নীচের অভ্যন্তরে আপনার পুরানো কোডটি আবদ্ধ করতে পারেন:(function($){ })($j)
মেরিনোস

36

Http://forum.jquery.com/topic/m Multiple-versions-of-jquery-on-the- same- পৃষ্ঠা থেকে নেওয়া :

  • মূল পৃষ্ঠাটি তার "jquery.versionX.js" লোড করে - $এবং jQueryসংস্করণ X এর সাথে সম্পর্কিত।
  • আপনি আপনার "jquery.versionY.js" কল করুন - এখন $এবং jQueryসংস্করণওয়াইয়ের সাথে যুক্ত, প্লাস _$এবং _jQueryসংস্করণ X এর সাথে সম্পর্কিত।
  • my_jQuery = jQuery.noConflict(true);- এখন $এবং jQueryসংস্করণ এক্স এর অন্তর্গত, _$এবং _jQueryসম্ভবত নাল, এবং my_jQueryসংস্করণওয়াই।

9
আমি লিঙ্কে না যাওয়া পর্যন্ত বুঝতে পারিনি। "আপনি যখন আপনার jQuery.xxjs লোড করবেন, এটি বিদ্যমান $ এবং jQuery ওয়ারগুলি ওভাররাইট করে দেবে ... তবে এটি তাদের একটি ব্যাকআপ কপি রাখে (_ $ এবং _jQuery এ) no আপনার জেএস অন্তর্ভুক্তি "
কলিন


ভবিষ্যতে, দয়া করে বাহ্যিক উত্সগুলি উল্লেখ সম্পর্কে আরও স্পষ্ট থাকুন। আরও তথ্যের জন্য দেখুন stackoverflow.com/help/references
ম্যাট

23

আপনার পৃষ্ঠায় আপনার ইচ্ছেমতো বিভিন্ন 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> 

ডেমো | সূত্র


23

JQuery এর দ্বিতীয় সংস্করণ এটি ব্যবহার করা লোড করা সম্ভব এবং তারপরে মূলটিতে পুনরুদ্ধার করা বা যদি কোনও জিকোয়ারি আগে লোড না থাকে তবে দ্বিতীয় সংস্করণটি রাখা সম্ভব। এখানে একটি উদাহরণ:

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

5

আমি বলতে চাই যে আপনার অবশ্যই সর্বদা 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>

আপনি যদি ব্যবহার করে কিছু লিখেন তবে এখানে $সর্বশেষতম সংস্করণ পাবেন here তবে আপনার যদি পুরানো সাথে কিছু করার দরকার হয় তবে কেবল $oldjQueryপরিবর্তে ব্যবহার করুন $

এখানে একটি উদাহরণ

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

ডেমো


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.