Проект, над яким я працюю, вимагає використання jQuery на веб-сторінках клієнтів. Клієнти вставляють фрагмент коду, який ми надамо, який включає кілька <script>елементів, що створюють віджет у створеному <script>файлі <iframe>. Якщо вони вже не використовують останню версію jQuery, це також буде включати (швидше за все) a <script>для розміщеної Google версії jQuery.

Проблема полягає в тому, що деякі клієнти, можливо, вже встановили старішу версію jQuery. Хоча це може спрацювати, якщо це принаймні досить недавня версія, наш код покладається на деяку нещодавно представлену функціональність у бібліотеці jQuery, тому можуть бути випадки, коли версія jQuery клієнта занадто стара. Ми не можемо вимагати від них оновлення до останньої версії jQuery.

Чи є можливість завантажити нову версію jQuery, щоб використовувати її лише в контексті нашого коду, що не заважатиме і не впливатиме на будь-який код на сторінці замовника? В ідеалі, можливо, ми могли б перевірити наявність jQuery, виявити версію, і якщо вона занадто стара, то якось завантажуємо останню версію просто для використання для нашого коду.

У мене виникла ідея завантажувати jQuery у <iframe>домен клієнта, який також включає наш <script>, який здається, що це можливо, але я сподіваюся, що є більш елегантний спосіб зробити це (не кажучи вже про покарання продуктивності та складності додаткові <iframe>).

Так, це можливо завдяки безконфліктному режиму 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 належить до версіїX.
• Ви називаєте свій «jquery.versionY.js» - тепер $і jQueryналежать versionY, а також _$і _jQueryналежать versionX.
• my_jQuery = jQuery.noConflict(true);- тепер $і jQueryналежать до версіїX, _$і _jQuery, ймовірно, є нульовою, і my_jQueryце версія Y.

На вашій сторінці ви можете мати скільки завгодно різних версій 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/ .