Manage third-party javascript libraries with jQuery enabled

Question

I am working on a website globalization project that includes (we, the supplier), offering our customers to embed a script tag on their home / source site. The script tag is needed to help our customers become global, and part of the solution embodies a user interface that runs based on specific end-user criteria.

The user interface is built using jQuery, which we really cannot expect that our customers will embed them on their pages, not to mention version mismatches, will be difficult to solve. Therefore, our third-party library loads its own version of jQuery, although it is named differently to avoid conflicts.

However, such a mechanism requires that we rename all jQuery instances to something that will help us avoid name collisions with another jQuery instance (if present) and makes it very difficult to manage the processed jQuery (MY_Query in the examples below), not to mention the upgrade.

for instance

jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, . . . jQuery.fn = jQuery.prototype = ... 

becomes

 MY_JQuery = window.MY_JQuery = window.MY_Q = function( selector, context ) { // The MY_JQuery object is actually just the init constructor 'enhanced' return new MY_JQuery.fn.init( selector, context ); }, . . . MP_JQuery.fn = MP_JQuery.prototype = ... 

In an ideal world, we and the client will have one version of jQuery on the site, and we will both use it to our advantage. But this would mean that the jQuery update would require significant testing on both sides (while a modified version of jQuery is contained), and that any desired plugin would require the client to add the appropriate script tags to their site, which sparked a political discussion between the two sides about which versions will win.

So, can I control our version of jQuery (with plugins) on the client site without having to rename all jQuery instances with something like MY_Query with the above limitations?

Answer 1

Why not check if they have jQuery already included in the page, and if it does not dynamically load it? If you know the jQuery level you need, you can check it out as follows:

 if( !jQuery || !jQuery.fn.jquery === "1.4.4"){ var url = "http://code.jquery.com/jquery-1.4.4.js"; var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild(script); } 

You'll probably want to improve version detection to make sure it doesn't have a version after 1.4.4, but I'm sure you can write the code for this yourself :-)

==== Edit based on feedback

Therefore, you need to support multiple versions of jquery per page. Have you tried something like this:

 var original_jquery = $().noConflict(); original_jquery.getScript("http://code.jquery.com/jquery-1.4.4.js"); var new_jquery = $().noConflict(); window.$ = original_jquery; 

Then use new_jquery as your version of jquery? I have not tested this to make sure it works, but you might be lucky with it.

==== Final editing

As you mentioned, my javascript above was not entirely accurate, so I tried a few things in the console. And yes, you do not need to keep the old version of jQuery, because jQuery does this in the noConflict method. So just call getScript, then noConflict, but save the new variable:

 >> $.fn.jquery "1.4.2" >> $.getScript("http://code.jquery.com/jquery-1.4.4.js"); undefined >> $.fn.jquery "1.4.4" >> var new_jquery = $.noConflict(); undefined >> new_jquery.fn.jquery "1.4.4" >> $.fn.jquery "1.4.2" 

Answer 2

You tried to use jQuery.noConflict () . It sounds like it can help you.