Bisakah saya menggunakan beberapa versi jQuery di halaman yang sama?


427

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



1
Saya mengalami masalah yang sama. Karena saya hanya menggunakan jQuery beberapa kali dalam skrip tertanam saya, saya memutuskan untuk melepaskan jQuery sama sekali dan hanya melakukan apa yang saya butuhkan langsung di JavaScript. Situs ini: youmightnotneedjquery.com sangat berguna.
Ferruccio

Jawaban:


578

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();.


13
Terima kasih banyak, ceejayoz! Itu terlihat seperti solusi yang layak - satu-satunya masalah potensial adalah bahwa saya tidak memiliki kendali atas bagian pertama dari solusi kode Anda (menugaskan versi jQuery yang lebih lama ke alias yang berbeda). Bagaimana pelanggan menggunakan jQuery akan bervariasi dan di luar kendali saya. Bisakah saya menggunakan setengah yang terakhir dengan aman, atau apakah kedua perpustakaan perlu memanggil noConflict ()?
Bungle

7
Ya, Anda harus bisa menggunakan babak kedua saja.
ceejayoz

9
Apakah ini benar-benar transparan ke halaman asli? Jika mereka menggunakan $ atau jQuery setelah kode ini, apakah ini merujuk ke versi jQuery mereka sendiri atau yang lebih baru (yang mungkin memiliki lebih sedikit plugin yang diinstal)?
Wim

2
@ceejayoz, apa yang terjadi jika Anda memiliki fungsi self-invaging yang menggunakan banyak $ di dalamnya. Kita harus mengubah setiap $ untuk jquery_1_3_2, dalam bagian noconflict itu ???
klewis

37
@blachawk Tidak, hanya itu saja. (function($) { /*your code here*/ }(jquery_x_x_x));
Fabrício Matté

85

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

6
Untuk menghindari mengganti nama variabel jquery di banyak tempat, Anda cukup menyertakan kode lama Anda di bawah ini:(function($){ })($j)
Marinos

36

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.

9
Saya tidak mengerti sampai saya pergi ke tautan. "Ketika Anda memuat jQuery.xxjs Anda, itu akan menimpa $ dan jQuery vars yang ada ... TETAPI menyimpan salinan cadangannya (dalam _ $ dan _jQuery). Memanggil noConflict (true) Anda mengembalikan situasi seperti sebelumnya inklusi js Anda "
Colin


Di masa depan, harap lebih eksplisit tentang referensi sumber eksternal. Untuk informasi lebih lanjut, lihat stackoverflow.com/help/referencing
Matt

23

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


23

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>

5

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


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.