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

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

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

  • Как я могу округлить число в JavaScript? .toFixed () возвращает строку?
  • Угловой JS: вход не работает
  • Как передавать данные MP3 через WebSockets с помощью node.js и socket.io?
  • Передача аргументов угловым фильтрам
  • Google отключил использование API карт для этого приложения
  • Интересный тест Javascript RegExp
  • Есть ли способ загрузить более новую версию jQuery для использования только в контексте нашего кода, который не будет мешать или влиять на какой-либо код на странице клиента? В идеале, возможно, мы могли бы проверить наличие jQuery, обнаружить версию, и если она слишком старая, то как-то загрузите самую последнюю версию, чтобы использовать ее для нашего кода.

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

    6 Solutions collect form web for “Можно ли использовать несколько версий jQuery на одной странице?”

    Да, это выполнимо из-за режима 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 принадлежит версииX.
    • Вы называете свой «jquery.versionY.js» – теперь $ и jQuery принадлежат версииY, плюс _$ и _jQuery принадлежат версииX.
    • 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)}) 

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

    JavaScript делает сайт умным, красочным и простым использованием.