โครงการที่ฉันกำลังดำเนินการอยู่นั้นต้องการการใช้ jQuery บนเว็บเพจของลูกค้า ลูกค้าจะใส่ก้อนของรหัสที่เราจะจัดหาซึ่งรวมถึงไม่กี่<script>องค์ประกอบที่สร้างเครื่องมือในสร้างแล้ว<script> <iframe>หากพวกเขาไม่ได้ใช้ jQuery รุ่นล่าสุดอยู่แล้วสิ่งนี้จะรวมถึง (สำหรับส่วนใหญ่) a <script>สำหรับ jQuery รุ่นที่โฮสต์โดย Google

ปัญหาคือลูกค้าบางรายอาจมี jQuery เวอร์ชันเก่าติดตั้งอยู่แล้ว แม้ว่าวิธีนี้อาจใช้งานได้หากเป็นรุ่นล่าสุดอย่างเป็นธรรม แต่โค้ดของเราอาศัยฟังก์ชันการทำงานที่ได้รับการแนะนำเมื่อเร็ว ๆ นี้ในไลบรารี jQuery ดังนั้นจึงมีข้อผูกมัดที่จะต้องใช้อินสแตนซ์เมื่อรุ่น jQuery ของลูกค้าเก่าเกินไป เราไม่ต้องการให้พวกเขาอัปเกรดเป็น jQuery เวอร์ชันล่าสุด

มีวิธีใดที่จะโหลด jQuery เวอร์ชันที่ใหม่กว่าเพื่อใช้ภายในบริบทของรหัสของเราเท่านั้นซึ่งจะไม่รบกวนหรือส่งผลกระทบต่อรหัสใด ๆ บนหน้าลูกค้า? ตามหลักแล้วบางทีเราสามารถตรวจสอบสถานะของ jQuery ตรวจพบเวอร์ชันและถ้ามันเก่าเกินไปก็จะโหลดเวอร์ชันล่าสุดเพื่อใช้กับโค้ดของเรา

ฉันมีความคิดในการโหลด jQuery ใน<iframe>โดเมนของลูกค้าซึ่งรวมถึงของเรา<script>ซึ่งดูเหมือนจะเป็นไปได้ แต่ฉันหวังว่าจะมีวิธีที่สง่างามกว่าที่จะทำ (ไม่เอ่ยถึงหากไม่มีประสิทธิภาพและความซับซ้อนของ พิเศษ<iframe>)

ใช่เป็นไปได้เนื่องจากโหมด 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>

จากนั้นแทนที่จะเป็น$('#selector').function();คุณจะทำหรือjQuery_1_3_2('#selector').function();jQuery_1_1_3('#selector').function();

หลังจากลองดูที่สิ่งนี้และลองทำดูฉันพบว่าจริง ๆ แล้วมันไม่อนุญาตให้มี 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>

ดังนั้นการเพิ่ม "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();
        });
    });

นำมาจากhttp://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

• หน้าต้นฉบับโหลด "jquery.versionX.js" ของเขา - $และjQueryเป็นของ versionX
• คุณเรียก "jquery.versionY.js" ของคุณ - ตอนนี้$และjQueryเป็นของ versionY บวก_$และ_jQueryเป็นของ versionX
• my_jQuery = jQuery.noConflict(true);- ตอนนี้$และjQueryเป็นของ versionX _$และ_jQueryอาจเป็นโมฆะและmy_jQueryเป็น versionY

คุณสามารถมี 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 | แหล่ง

เป็นไปได้ที่จะโหลด jQuery เวอร์ชันที่สองใช้แล้วทำการกู้คืนเป็นต้นฉบับหรือเก็บเวอร์ชันที่สองหากไม่มีการโหลด 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>

ฉันอยากจะบอกว่าคุณต้องใช้ 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)})

การสาธิต

ใช่คุณทำได้ ลิงค์นี้มีรายละเอียดเกี่ยวกับวิธีการที่คุณสามารถประสบความสำเร็จที่: https://api.jquery.com/jquery.noconflict/