我正在从事的一个项目需要在客户的Web页面上使用jQuery。客户将插入我们提供的代码块，其中包括一些<script>元素，用于在<script>-created <iframe>中构建小部件。如果他们还没有使用最新版本的jQuery，这也将包括(很可能)谷歌的托管版本的jQuery的<脚本>。
问题是一些客户可能已经安装了较旧版本的jQuery。虽然如果它至少是最近的版本，这可能是可行的，但我们的代码确实依赖于jQuery库中最近引入的一些功能，因此一定会出现客户的jQuery版本太旧的情况。我们不能要求他们升级到最新版本的jQuery。
有没有办法加载一个更新版本的jQuery，只在我们的代码上下文中使用，而不会干扰或影响客户页面上的任何代码?理想情况下，也许我们可以检查jQuery的存在，检测版本，如果它太旧，那么以某种方式加载最新版本以供我们的代码使用。
我有在客户域的<iframe>中加载jQuery的想法，其中还包括我们的<脚本>，这似乎是可行的，但我希望有一种更优雅的方式来做到这一点(更不用说没有额外的<iframe>s的性能和复杂性的惩罚)。
当前回答
在查看并尝试之后，我发现它实际上不允许同时运行多个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();
});
});
其他回答
<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>
这对我很有效。
为了进一步改进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版本。
使用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 |源文件
在查看并尝试之后，我发现它实际上不允许同时运行多个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，可以加载第二个版本的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>
