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

380

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

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

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

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

Теги:
iframe

7 ответов

494
Лучший ответ

Да, это возможно из-за режима 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();.

  • 12
    Большое спасибо, ceejayoz! Это выглядит как жизнеспособное решение - единственная потенциальная проблема заключается в том, что я не имею никакого контроля над первой частью вашего программного кода (назначая более старую версию jQuery другому псевдониму). То, как клиент использует jQuery, будет меняться и находится вне моего контроля. Могу ли я просто безопасно использовать вторую половину или обе библиотеки должны вызывать noConflict ()?
  • 7
    Да, вы должны иметь возможность просто использовать второй тайм.
Показать ещё 9 комментариев
71

Посмотрев на это и попробовав, я обнаружил, что на самом деле это не позволяет запускать сразу несколько экземпляров 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();
        });
    });
  • 2
    Чтобы избежать переименования переменной jquery во многих местах, вы можете просто заключить свой старый код в следующее: (function($){ })($j)
28

Взято из 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, вероятно, являются нулевыми, а my_jQuery - версией.
  • 8
    Я не понял, пока не пошел по ссылке. «Когда вы загружаете свой jQuery.xxjs, он перезаписывает существующие переменные $ и jQuery ... НО он сохраняет их резервную копию (в _ $ и _jQuery). Вызывая noConflict (true), вы восстанавливаете ситуацию, как это было раньше ваше JS включение "
Показать ещё 1 комментарий
20

На вашей странице может быть как можно больше различных версий 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 | Источник

19

Можно загрузить вторую версию 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>
4

Я хотел бы сказать, что вы всегда должны использовать последние или последние стабильные версии 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)})

Демо

1

Абсолютно, да, вы можете. Эта ссылка содержит сведения о том, как вы можете это достичь: https://api.jquery.com/jquery.noconflict/.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню