it-swarm.com.ru

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

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

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

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

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

402
Bungle

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

542
ceejayoz

Посмотрев на это и попробовав, я обнаружил, что на самом деле он не позволяет запускать более одного экземпляра 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();
        });
    });
79
Weird Mike

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

  • Исходная страница загружает его "jquery.versionX.js" - $ и jQuery принадлежат versionX.
  • Вы называете свои "jquery.versionY.js" - теперь $ и jQuery принадлежат versionY, плюс _$ и _jQuery принадлежат versionX.
  • my_jQuery = jQuery.noConflict(true); - теперь $ и jQuery принадлежат versionX, _$ и _jQuery, вероятно, имеют значение null, а my_jQuery - versionY.
33
Juan Vidal

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

22
martynas

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

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

Демо

5
gdmanandamohon

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

2
Jaime Montoya