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

Question

我正在开发的项目需要在客户的Web页面上使用jQuery.客户将插入我们将提供的一大块代码,其中包括一些<script>在<script>-created 中构建窗口小部件的元素<iframe>.如果他们还没有使用最新版本的jQuery,那么这也将包括(最有可能)<script>Google的托管版jQuery.

问题是一些客户可能已经安装了旧版本的jQuery.虽然这可能有用,如果它至少是一个相当新的版本,我们的代码确实依赖于jQuery库中最近引入的一些功能,所以当客户的jQuery版本太旧时必然存在实例.我们不能要求他们升级到最新版本的jQuery.

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

我有想法<iframe>在客户的域中加载jQuery ,也包括我们的<script>,这似乎可能是可行的,但我希望有更优雅的方式来做到这一点(更不用说没有性能和复杂性的惩罚了额外的<iframe>s).

Answer 1

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

Answer 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();
        });
    });

Answer 3

摘自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.

Answer 4

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

演示 | 资源

Answer 5

有可能加载第二版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>

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

看看这里,如果你用它写东西,$那么你会得到最新的版本.但如果你需要用旧的东西做任何事情,那就用$oldjQuery而不是$.

这是一个例子

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

演示