【问题标题】：Can I use multiple versions of jQuery on the same page?我可以在同一页面上使用多个版本的 jQuery 吗？
【发布时间】：2010-12-06 16:47:22
【问题描述】：

我正在进行的一个项目需要在客户的网页上使用 jQuery。客户将插入一段我们将提供的代码，其中包括一些 <script> 元素，这些元素在 <script>-created <iframe> 中构建小部件。如果他们还没有使用最新版本的 jQuery，这也将包括（很可能）<script> 用于 Google 托管的 jQuery 版本。

问题是一些客户可能已经安装了旧版本的 jQuery。虽然如果它至少是一个相当新的版本，这可能会起作用，但我们的代码确实依赖于 jQuery 库中最近引入的一些功能，所以当客户的 jQuery 版本太旧时，肯定会出现这种情况。我们不能要求他们升级到最新版本的 jQuery。

是否有任何方法可以加载更新版本的 jQuery 以仅在我们的代码上下文中使用，并且不会干扰或影响客户页面上的任何代码？理想情况下，也许我们可以检查 jQuery 是否存在，检测版本，如果它太旧，然后以某种方式加载最新版本，仅用于我们的代码。

我的想法是在客户域中的 <iframe> 中加载 jQuery，其中还包括我们的 <script>，这似乎是可行的，但我希望有一种更优雅的方式来做到这一点（不是更不用说额外的<iframe>s 的性能和复杂性损失）。

【问题讨论】：

我遇到了同样的问题。因为我在我的嵌入式脚本中只使用了几次 jQuery，所以我决定完全放弃 jQuery，直接在 JavaScript 中做我需要的事情。这个网站：youmightnotneedjquery.com 非常有用。

标签： javascript jquery iframe

【解决方案1】：

是的，由于 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>

那么，您可以使用jQuery_1_3_2('#selector').function(); 或jQuery_1_1_3('#selector').function();，而不是$('#selector').function();。

【讨论】：

非常感谢，ceejayoz！这看起来是一个可行的解决方案——唯一的潜在问题是我无法控制代码解决方案的第一部分（将旧版本的 jQuery 分配给不同的别名）。客户使用 jQuery 的方式会有所不同，并且不在我的控制范围内。我可以安全地使用后半部分，还是两个库都需要调用 noConflict()？
是的，你应该可以只使用后半部分。
这对原始页面真的是透明的吗？如果他们在这段代码之后使用$或jQuery，这是指他们自己的jQuery版本还是更新的jQuery版本（可能安装的插件更少）？
@ceejayoz，如果你有一个使用大量 $ 的自调用函数会发生什么。我们必须将每个 $ 更改为 jquery_1_3_2，在那个 noconflict 部分？？？
@blachawk 不，只是别名。 (function($) { /*your code here*/ }(jquery_x_x_x));

【解决方案2】：

在查看并尝试之后，我发现它实际上一次不允许运行多个 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();
        });
    });

【讨论】：

为了避免在很多地方重命名 jquery 变量，您可以将旧代码包含在以下内容中：(function($){ })($j)

【解决方案3】：

取自http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page：

原始页面加载了他的“jquery.versionX.js”——$ 和 jQuery 属于 versionX。
你调用你的“jquery.versionY.js”——现在$和jQuery属于版本Y，加上_$和_jQuery属于版本X。
my_jQuery = jQuery.noConflict(true); -- 现在$ 和jQuery 属于版本X，_$ 和_jQuery 可能为空，而my_jQuery 是版本Y。

【讨论】：

直到我去链接我才明白。 “当你加载你的 jQuery.xxjs 时，它会覆盖现有的 $ 和 jQuery 变量......但它会保留它们的备份副本（在 _$ 和 _jQuery 中）。调用 noConflict(true) 你会恢复原来的情况在你的 js 包含之前”
今后，请更加明确地引用外部资源。有关详细信息，请参阅stackoverflow.com/help/referencing

【解决方案4】：

如果之前没有加载 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>

【讨论】：

【解决方案5】：

您可以在页面上拥有任意多个不同的 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 | Source

【讨论】：

【解决方案6】：

我想说的是，您必须始终使用 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>

如果您使用$ 编写内容，请看这里，那么您将获得最新版本。但是，如果您需要对 old 做任何事情，那么只需使用$oldjQuery 而不是 $。

这是一个例子

$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})

Demo

【讨论】：

【解决方案7】：

当然，是的，你可以。此链接包含有关如何实现该目标的详细信息：https://api.jquery.com/jquery.noconflict/。

【讨论】：

【解决方案8】：

<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>

它对我有用。

【讨论】：

使用jQuery.noConflict():

使用`jQuery.noConflict()`: