Can I use multiple versions of jQuery on the same page?
A project I'm working on requires the use of jQuery on customers' Web pages. Customers will insert a chunk of code that we'll supply which includes a few <script> elements that build a widget in a <script> -created <iframe> . If they aren't already using the latest version of jQuery, this will also include (most likely) a <script> for Google's hosted version of jQuery.
The problem is that some customers may already have an older version of jQuery installed. While this may work if it's at least a fairly recent version, our code does rely on some recently introduced functionality in the jQuery library, so there are bound to be instances when a customer's jQuery version is just too old. We can't require that they upgrade to the latest version of jQuery.
Is there any way to load a newer version of jQuery to use only within the context of our code, that will not interfere with, or affect, any code on the customer's page? Ideally, maybe we could check for the presence of jQuery, detect the version, and if it's too old, then somehow load the most recent version just to use for our code.
I had the idea of loading jQuery in an <iframe> in the customer's domain that also includes our <script> , which seems like it might be feasible, but I'm hoping there's a more elegant way to do it (not to mention without the performance and complexity penalties of extra <iframe> s).
Yes, it's doable due to jQuery's noconflict mode. 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>
Then, instead of $('#selector').function(); , you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function(); .
After looking at this and trying it out I found it actually didn't allow more than one instance of jquery to run at a time. After searching around I found that this did just the trick and was a whole lot less code.
<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>
So then adding the "j" after the "$" was all I needed to do.
$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();
});
});
Taken from http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:
$ and jQuery belong to versionX. $ and jQuery belong to versionY, plus _$ and _jQuery belong to versionX. my_jQuery = jQuery.noConflict(true); -- now $ and jQuery belong to versionX, _$ and _jQuery are probably null, and my_jQuery is versionY. 上一篇: 不使用表单设置POST变量