我正在从事的项目需要在客户的网页上使用jQuery。 客户将插入我们将提供的代码块,其中包括一些<script>
元素,这些元素可在<script>
创建的<iframe>
中构建窗口小部件。 如果他们尚未使用最新版本的jQuery,则还可能(很可能)包含Google托管版本的jQuery的<script>
。
问题在于某些客户可能已经安装了旧版本的jQuery。 尽管这可能至少有效,但是我们的代码确实依赖jQuery库中最近引入的某些功能,因此,在某些情况下,客户的jQuery版本太旧了。 我们不能要求它们升级到最新版本的jQuery。
有没有办法加载新版本的jQuery以仅在我们代码的上下文中使用,而不会干扰或影响客户页面上的任何代码? 理想情况下,也许我们可以检查jQuery的存在,检测版本,如果版本太旧,则以某种方式加载最新版本以用于我们的代码。
我的想法是将jQuery加载到客户域的<iframe>
中,该域还包括我们的<script>
,这似乎是可行的,但我希望有一种更优雅的方法(更不用说额外的<iframe>
的性能和复杂性损失)。
#1楼
可以加载使用它的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>
#2楼
是的,由于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();
。
#3楼
在查看并尝试之后,我发现它实际上一次不允许运行多个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();
});
});
#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>
#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)})
#6楼
绝对可以。 该链接包含有关如何实现此目标的详细信息: https : //api.jquery.com/jquery.noconflict/ 。
#7楼
取自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
为versionY。