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

Question

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

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

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

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

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

465

javascript jquery iframe

Источник

user167911 14 окт '09 в 14:22

9 ответов

Решение

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

98

Источник

user1767647 09 апр '13 в 22:59

Взято с 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.

38

Источник

user535315 13 янв '12 в 14:52

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

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

25

Источник

user3300831 16 мар '14 в 13:44

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

25

Источник

user88662 14 ноя '12 в 00:03

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

Источник

user2256217 30 май '17 в 08:41

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

2

Источник

user4242086 11 сен '17 в 23:46

Чтобы еще больше улучшить ответ Хуана Видаля, стоит отметить, что если вы используете несколько плагинов jquery с одной версией (например, 3.3.1) и несколько плагинов jquery с другой версией (например, 1.10.2), для работы более старой версии (и ее плагины ) вы должны копаться в минифицированных/неминифицированных файлах .js плагина и изменить строку, которая будет выглядеть примерно так:

      Example 1: module.exports=a:a(jQuery) to module.exports=a:a(my_jQuery)
Example 2: b(a,require("jquery")):b(a,a.jQuery)} to this: or b(a,require("jquery")):b(a,a.my_jQuery)}

1

Источник

user557432 25 май '22 в 08:54

      <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>var $j = $.noConflict(true);</script>

У меня это не сработало, я изменил его на

      <script>var jQuery = $.noConflict(true);</script>

и это сработало для меня.

1

Источник

user5366056 16 авг '21 в 11:57

Другие вопросы по тегам javascript jquery iframe

user1902010 14 окт '09 в 14:27 2009-10-14 14:27 · Accepted Answer · 2009-10-14 14:27

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

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

9 ответов

использование jQuery.noConflict():

использование `jQuery.noConflict()`: