[英]Can I use multiple versions of jQuery on the same page?
我正在进行的一个项目需要在客户的网页上使用 jQuery。 客户将插入一段我们将提供的代码,其中包括一些在 <script> 创建的<iframe>
中构建小部件的<script>
<script>
。 如果他们还没有使用最新版本的 jQuery,这也将包括(很可能)用于 Google 托管版本的 jQuery 的<script>
。
问题是一些客户可能已经安装了旧版本的 jQuery。 虽然如果它至少是一个相当新的版本,这可能会起作用,但我们的代码确实依赖于 jQuery 库中最近引入的一些功能,所以当客户的 jQuery 版本太旧时,肯定会出现这种情况。 我们不能要求他们升级到最新版本的 jQuery。
有没有办法加载更新版本的 jQuery 以仅在我们的代码上下文中使用,而不会干扰或影响客户页面上的任何代码? 理想情况下,也许我们可以检查 jQuery 的存在,检测版本,如果它太旧,然后以某种方式加载最新版本,仅用于我们的代码。
我有在客户域中的<iframe>
中加载 jQuery 的想法,其中还包括我们的<script>
,这似乎是可行的,但我希望有一种更优雅的方式来做到这一点(更不用说没有了额外<iframe>
的性能和复杂性损失)。
是的,由于 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('#selector').function();
.
在查看并尝试之后,我发现它实际上一次不允许运行多个 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();
});
});
取自http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :
$
和jQuery
属于versionX。$
和jQuery
属于 versionY,加上_$
和_jQuery
属于 versionX。my_jQuery = jQuery.noConflict(true);
-- 现在$
和jQuery
属于versionX, _$
和_jQuery
可能为null, my_jQuery
是versionY。可以加载第二个版本的 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 版本。
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>
我想说的是,您必须始终使用 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)})
绝对,是的,你可以。 此链接包含有关如何实现该目标的详细信息: https : //api.jquery.com/jquery.noconflict/ 。
<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 的答案,值得注意的是,如果您使用多个 jquery 插件与一个版本(例如 3.3.1)和多个 jquery 插件与另一个版本(例如 1.10.2),旧版本工作(它的插件) 您必须深入研究插件的缩小/未缩小 .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)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.