我可以在同一页面上使用多个版本的jQuery吗?


426

我正在从事的项目需要在客户的网页上使用jQuery。客户将插入我们将提供的代码块,其中包括一些<script><script>-created 中构建窗口小部件的元素<iframe>。如果他们还没有使用最新版本的jQuery,则还将(很可能)包含<script>Google托管版本的jQuery。

问题在于某些客户可能已经安装了旧版本的jQuery。尽管这可能至少适用于最新版本,但我们的代码确实依赖jQuery库中最近引入的一些功能,因此,在某些情况下,客户的jQuery版本太旧了。我们不能要求它们升级到最新版本的jQuery。

有没有办法加载新版本的jQuery以仅在我们代码的上下文中使用,而不会干扰或影响客户页面上的任何代码?理想情况下,也许我们可以检查jQuery的存在,检测版本,如果版本太旧,则以某种方式加载最新版本以用于我们的代码。

我的想法是在<iframe>包含我们的的客户域中将jQuery加载到其中<script>,这似乎是可行的,但是我希望有一种更优雅的方式来实现(更不用说没有对性能和复杂性的惩罚了)额外<iframe>的)。



1
我遇到了同样的问题。由于我在嵌入式脚本中只使用过jQuery几次,因此我决定完全放弃jQuery,而直接在JavaScript中直接做我需要的事情。这个网站:youmightnotneedjquery.com非常有用。
Ferruccio 2015年

Answers:


578

是的,由于jQuery的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();


13
非常感谢,ceejayoz!这看起来是一个可行的解决方案-唯一的潜在问题是,我对您的代码解决方案的第一部分没有任何控制(将旧版jQuery分配给其他别名)。客户如何使用jQuery会有所不同,这超出了我的控制范围。我可以安全地使用后半部分,还是两个库都需要调用noConflict()?
Bungle,2009年

7
是的,您应该只能使用下半部分。
ceejayoz

9
这对原始页面真的透明吗?如果他们这段代码之后使用$或jQuery 这将引用他们自己的jQuery版本还是较新的jQuery版本(可能安装了较少的插件)?
Wim

2
@ceejayoz,如果您拥有一个在其中使用大量$的自调用函数,该怎么办。我们必须在该noconflict部分中将每个$更改为jquery_1_3_2 ???
klewis

37
@blachawk不,只是给它起别名。(function($) { /*your code here*/ }(jquery_x_x_x));
法布里西奥磨砂

85

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

6
为了避免在很多地方重命名jquery变量,您可以将旧代码括在以下代码中:(function($){ })($j)
Marinos

36

取自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可能是空的,my_jQuery是versionY。

9
直到我转到链接,我才明白。“当您加载jQuery.xxjs时,它将覆盖现有的$和jQuery变量。但是会保留它们的备份副本(在_ $和_jQuery中。)调用noConflict(true)可以恢复以前的状态您的js包含项”
Colin


将来,请更明确地引用外部资源。有关更多信息,请参见stackoverflow.com/help/referenceencing
Matt

23

您可以根据需要在页面上拥有尽可能多的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> 

演示 | 资源


23

可以加载使用它的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最新或最近的稳定版本。但是,如果您需要对其他版本进行某些操作,则可以添加该版本并将其重命名$为其他名称。例如

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

演示版


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.