Include a specific version of JQuery and a plugin without conflicting with the page's JavaScript library?

Question

TL;DR: I want to include a specific version of JQuery and a specific JQuery plugin that is associated with my inclusion of jQuery on multiple different sites where I know nothing about the JavaScript libraries/plugins used by them, without conflicts. Possible? How?

The whole story: Let's say I want to build a Reddit platform where multiple sites can link to Reddit threads by including http://myredditplatform.com/reddit.js and having <a href="" data-reddit-thread-id="1234"></a> elements littered on the page. Once a user clicks on a link like that, I open reddit in a beautiful modal window.

Now because I want Reddit Platform experience to be consistent across all sites that use my script, I want all sites to use my particular modal plugin and I want to style the links in my particular fashion.

But I can never be sure what Javascript library or plugins the other sites are using, so I must make sure that when reddit.js loads JQuery, it must not conflict with other libraries on the page and when reddit.js loads, for example, prettyPhoto plugin it should only be associated with the jQuery library included by me.

But I also want widespread adoption for my platform, so I don't want to place any more restrictions on the sites like you must have jQuery, or you must have prettyPhoto loaded. I just want them to include this one JS file, reddit.js which does everything for them.

Is it possible to make this work? How would you go about it?

Thanks!

Answer 1

Below is a stripped down version of my widget loader which does basically what you want.

The key line of code is jquery1_8_2 = jQuery.noConflict(true);

More info here: http://api.jquery.com/jQuery.noConflict/

var myWidgetLoader = function() {

   this.start = function() {
      this.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', function(){

         jquery1_8_2 = jQuery.noConflict(true);  // true = unconflict all jQuery vars, including "jQuery"
         (function(jQuery) {
            var $ = jQuery;
            // do stuff that uses jQuery
         })(jquery1_8_2);

      });
   }

   this.getScript = function(url, success) {
      var script = document.createElement('script');
      script.src = url;
      var head = document.getElementsByTagName('head')[0], done=false;
      script.onload = script.onreadystatechange = function(){
         if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done = true;
            success();
         }
      };
      head.appendChild(script);
   }

}

myWidgetLoader.start();

Answer 2

You could make a custom build of jQuery that doesn't clobber the globals. Have a look at the source: https://github.com/jquery/jquery/blob/master/src/exports.js. You could modify this line:

window.jQuery = window.$ = jQuery;

to be like this:

window.myRedditPluginJquery = jQuery;

Then when you run your code, you need to use myRedditPluginJquery as $. Something like this IIFE:

(function($){
    //your code goes here
    //you also probably have to paste the source code for that plugin here too
})(myRedditPluginJquery);