Могу ли я использовать несколько версий jQuery на одной странице?

428

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

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

Есть ли способ загрузить более новую версию jQuery для использования только в контексте нашего кода, которая не будет мешать или влиять на какой-либо код на странице клиента? В идеале, может быть, мы могли бы проверить наличие jQuery, определить версию и, если она слишком старая, каким-то образом загрузить самую последнюю версию, чтобы использовать ее для нашего кода.

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

неумело
источник
1
Я столкнулся с той же проблемой. Поскольку я использовал jQuery лишь несколько раз во встроенном скрипте, я решил вообще отказаться от jQuery и просто делать то, что мне нужно, прямо в JavaScript. Этот сайт: 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();.

ceejayoz
источник
13
Большое спасибо, ceejayoz! Это выглядит как жизнеспособное решение - единственная потенциальная проблема заключается в том, что я не имею никакого контроля над первой частью вашего программного кода (назначая более старую версию jQuery другому псевдониму). То, как клиент использует jQuery, будет различным и находится вне моего контроля. Могу ли я просто безопасно использовать вторую половину или обе библиотеки должны вызывать noConflict ()?
Bungle
7
Да, вы должны использовать только второй тайм.
ceejayoz
9
Это действительно прозрачно для исходной страницы? Если они используют $ или jQuery после этого фрагмента кода, будет ли это относиться к их собственной версии jQuery или более новой (в которой возможно меньше установленных плагинов)?
Вим
2
@ceejayoz, что произойдет, если у вас есть функция, вызывающая себя, которая использует много $ внутри нее. Мы должны были бы изменить каждый $ на jquery_1_3_2, в этом разделе noconflict ???
Klewis
37
@blachawk Нет, просто псевдоним. (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>

Тогда добавление «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();
        });
    });
Странный Майк
источник
6
Чтобы избежать переименования переменной jquery во многих местах, вы можете просто заключить свой старый код в следующее:(function($){ })($j)
Marinos An
36

Взято с http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

  • Исходная страница загружает его "jquery.versionX.js" - $и jQueryпринадлежит версии X.
  • Вы называете свой «jquery.versionY.js» - теперь $и jQueryпринадлежите к версии Y, плюс _$и _jQueryпринадлежите к версии X.
  • my_jQuery = jQuery.noConflict(true);- теперь $и jQueryпринадлежат версии X, _$и _jQuery, вероятно, имеют значение null и my_jQueryявляются версией Y.
Хуан Видаль
источник
9
Я не понял, пока не пошел по ссылке. «Когда вы загружаете свой jQuery.xxjs, он перезаписывает существующие переменные $ и jQuery ... НО он сохраняет их резервную копию (в _ $ и _jQuery). Вызывая noConflict (true), вы восстанавливаете ситуацию, как это было раньше ваше включение JS "
Колин
В будущем, пожалуйста, будьте более откровенны в отношении ссылок на внешние источники. Для получения дополнительной информации см. Stackoverflow.com/help/referencing
Matt
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> 

ДЕМО | Источник

Martynas
источник
23

Можно загрузить вторую версию 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>
Томас Кирда
источник
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>

Посмотрите здесь, если вы напишите что-нибудь, используя, $то вы получите последнюю версию. Но если вам нужно что-то сделать со старым, просто используйте $oldjQueryвместо $.

Вот пример

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

демонстрация

gdmanandamohon
источник