Sebuah proyek yang sedang saya kerjakan membutuhkan penggunaan jQuery di halaman Web pelanggan. Pelanggan akan memasukkan potongan kode yang akan kami berikan yang mencakup beberapa <script>elemen yang membangun widget di <script>-created <iframe>. Jika mereka belum menggunakan versi terbaru jQuery, ini juga akan termasuk (kemungkinan besar) a <script>untuk versi jQuery yang dihosting Google.

Masalahnya adalah bahwa beberapa pelanggan mungkin sudah memiliki versi jQuery yang lebih lama diinstal. Meskipun ini dapat berfungsi jika setidaknya ini adalah versi yang cukup baru, kode kami bergantung pada beberapa fungsionalitas yang baru saja diperkenalkan di perpustakaan jQuery, jadi pasti ada saat ketika versi jQuery pelanggan terlalu lama. Kami tidak dapat meminta mereka untuk meningkatkan ke versi terbaru dari jQuery.

Apakah ada cara untuk memuat versi jQuery yang lebih baru untuk digunakan hanya dalam konteks kode kami, yang tidak akan mengganggu, atau memengaruhi, kode apa pun pada halaman pelanggan? Idealnya, mungkin kita bisa memeriksa keberadaan jQuery, mendeteksi versi, dan jika terlalu lama, maka entah bagaimana memuat versi terbaru hanya untuk digunakan untuk kode kita.

Saya memiliki ide untuk memuat jQuery di <iframe>domain pelanggan yang juga mencakup domain kami <script>, yang sepertinya layak, tetapi saya berharap ada cara yang lebih elegan untuk melakukannya (belum lagi tanpa penalti kinerja dan kompleksitas dari ekstra <iframe>s).

Ya, ini bisa dilakukan karena mode 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>

Lalu, bukannya $('#selector').function(); , Anda akan melakukan jQuery_1_3_2('#selector').function();atau jQuery_1_1_3('#selector').function();.

Setelah melihat ini dan mencobanya saya menemukan itu sebenarnya tidak memungkinkan lebih dari satu contoh jquery berjalan pada suatu waktu. Setelah mencari di sekitar saya menemukan bahwa ini melakukan trik dan kode jauh lebih sedikit.

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

Jadi kemudian menambahkan "j" setelah "$" itu yang harus saya lakukan.

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

Diambil dari http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

• Halaman asli memuat "jquery.versionX.js" - $dan jQuerymilik versiX.
• Anda menyebut "jquery.versionY.js" Anda - sekarang $dan jQuerymilik versiY, plus _$dan _jQuerymilik versiX.
• my_jQuery = jQuery.noConflict(true);- sekarang $dan jQuerymilik versiX, _$dan _jQuerymungkin nol, dan my_jQueryversiY.

Anda dapat memiliki banyak versi jQuery yang berbeda di halaman Anda seperti yang Anda inginkan.

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

Dimungkinkan untuk memuat versi kedua dari jQuery menggunakannya dan kemudian mengembalikan ke aslinya atau mempertahankan versi kedua jika tidak ada jQuery dimuat sebelumnya. Berikut ini sebuah contoh:

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

Saya ingin mengatakan bahwa Anda harus selalu menggunakan versi stabil terbaru atau terbaru jQuery. Namun jika Anda perlu melakukan beberapa pekerjaan dengan versi yang lain maka Anda dapat menambahkan versi itu dan mengganti namanya $menjadi beberapa nama lain. Contohnya

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

Lihat di sini jika Anda menulis sesuatu menggunakan $maka Anda akan mendapatkan versi terbaru. Tetapi jika Anda perlu melakukan sesuatu dengan yang lama maka gunakan $oldjQuerysaja$ .

Berikut ini sebuah contoh

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

Demo

Tentu saja bisa. Tautan ini berisi detail tentang bagaimana Anda bisa mencapainya: https://api.jquery.com/jquery.noconflict/ .