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

问题是一些客户可能已经安装了较旧版本的jQuery。虽然如果它至少是最近的版本,这可能是可行的,但我们的代码确实依赖于jQuery库中最近引入的一些功能,因此一定会出现客户的jQuery版本太旧的情况。我们不能要求他们升级到最新版本的jQuery。

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

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


当前回答

如果之前没有加载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的无冲突模式。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(“#选择器”).function();。

摘自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可能是null, my_jQuery是versionX。

为了进一步改进Juan Vidal的回答,值得注意的是,如果你在一个版本(如3.3.1)和另一个版本(如1.10.2)中使用多个jquery插件,为了让旧版本(以及它的插件)工作,你必须深入研究插件的缩小/未缩小的.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)}

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

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