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();.