embedded javascript that is based on jQuery

Question

I'm building a service that allows people to put a javascript code I gave them to their site. The javascript code is based on jQuery.

My question is how to do this to be safe and optimized, cause I don't want to break certain users website.

The thing I'm looking for so far( you can update if you think I need to face other problems):

1. what happens when the user already has jquery loaded on their page? should I load my jquery library using different namespace or should I use his jquery library.
2. in case I can use his jquery library, I think I'll need to check to see if the versions corespond, but again is this safe?
3. in case I want to use his jquery library, how do I check if he has jquery loaded and if he has the right version
4. this is related to 3. what happen if he changes his jquery library that doesn't correspond with the library I think it will be, leading to a bad result.

Looking for your answers. Thanks

Answer 1

1. Don't depend on the page's jQuery or try to use it. This will just turn into a support nightmare. You can't even be sure that a version is accurate, as the target page can alter its version of jQuery.

2. The best approach is for your code to create and load an iFrame. This gives you complete control over the iFrame's jQuery, CSS, etc. With vastly reduced chances of conflict.

3. If the iFrame approach is not possible for some reason, Use noConflict to minimize the chance of conflicting jQuery versions.
   Something like this:

    <script type="text/javascript"> if ($ || jQuery) { var PagesLibrary = $; var PagesjQuery = jQuery; </script> <!-- load your jQuery --> <script type="text/javascript" src="http://example.com/jquery-1.6.2.js"></script> <script type="text/javascript"> var my_jQuery = $.noConflict (true); if (PagesjQuery) { $ = PagesLibrary; jQuery = PagesjQuery; } </script> 

   Then instead of $('#selector').function(); ,
   Use: my_jQuery('#selector').function(); .

Answer 2

Without the context of actually what your injected code does, it's hard to say. If you're writing a general bit of functionality, you probably want to just implement it as a jQuery plugin, specify what version you target, and then leave it to your users to decide how to include it, etc.

However, it sounds more like you're writing a service of some kind. In that case, I recommend the following course:

Place all the code you depend on (jQuery, other libraries, your code, etc) in an anonymous function wrapper, and have the snippet you have people just inject a script tag pointing to your js file. This is most likely to give you reliable results. If you require special information, like an ID, have the snippet just before the injection code set those values in a global variable, or have extra code that runs just after the injection to call a function of yours with the data. Look at how Google Analytics accomplishes this for reference. Either way, you'll need to affect the global scope.

I know that may not be what you wanted to hear. You could always create an elaborate jQuery detection and injection scheme, but you'd run into exactly the problems you mention (like version collisions etc). The safe way to go is to combine all the code you require along with your own and provide it all as one file which only makes internal references.

Hope this helps!