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

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

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

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

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

7 ответов


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


посмотрев на это и попробовав его, я обнаружил, что на самом деле он не позволяет запускать более одного экземпляра 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 принадлежат versionX.
  • вы называете свой "jquery".версиони.js " -- сейчас $ и jQuery принадлежат versionY, плюс _$ и _jQuery принадлежат versionX.
  • my_jQuery = jQuery.noConflict(true); -- теперь $ и jQuery принадлежат versionX, _$ и _jQuery наверное null и my_jQuery is versionY.

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

демо | источник


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