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

我正在做的一个项目需要在客户的网页上使用jQuery。 客户将插入我们将要提供的代码块,其中包含一些<script>元素,用于在<script>创build的<iframe>中构build一个小部件。 如果他们还没有使用最新版本的jQuery,那么这个版本也会包含一个用于Google托pipe版本jQuery的<script>

问题是有些客户可能已经安装了旧版本的jQuery。 虽然这可能工作,如果它至less是一个相当新的版本,我们的代码确实依赖于jQuery库中最近推出的function,所以肯定会有客户的jQuery版本太旧的情况下。 我们不能要求他们升级到最新版本的jQuery。

有没有什么方法可以加载jQuery的新版本,只在我们的代码的上下文中使用,不会影响或影响客户页面上的任何代码? 理想情况下,也许我们可以检查jQuery的存在,检测版本,如果它太旧,然后加载最新的版本,只是为了我们的代码。

我有一个想法,即将jQuery加载到客户域中的<iframe>中,该域也包含我们的<script> ,这似乎是可行的,但我希望有一个更好的方法来做到这一点(更不用说没有额外的<iframe>的性能和复杂性惩罚)。

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

看着这个,并试图出来,我发现它实际上不允许多个jquery的实例一次运行。 经过四处寻找,我发现这只是一个窍门,而且是less了很多代码。

  <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.js” – $jQuery属于版本X。
  • 你可以调用你的“jquery.versionY.js” – 现在$jQuery属于versionY,而_$_jQuery属于versionX。
  • my_jQuery = jQuery.noConflict(true); – 现在$jQuery属于versionX, _$_jQuery可能是null, my_jQuery是versionY。

你可以在你的页面上拥有许多不同的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使用它,然后恢复到原始或保留第二版本,如果没有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最新或最近的稳定版本。 但是,如果您需要与其他版本一起工作,那么您可以添加该版本并将$重命名为其他名称。 例如

 <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)}) 

演示

当然可以。 此链接包含有关如何实现该function的详细信息: https : //api.jquery.com/jquery.noconflict/ 。