Namespacing jQuery/jQueryUi into markup that I don't control

I have a project that I've been trying to get just right for the past three months and it's still not quite there yet.

I'm injecting some jQuery and jQueryUI code into pages that I have no control over and I need to be able to "sandbox" my code away from anything that may or may not be there at DOM-ready, or at anytime there after...

I think I've got it, but I know there's most likely some edge cases and race conditions that I'm missing. Please fork this and tell me what I've missed. I'm tired of spinning my wheels on this issue.

Markup:

  
    
    

    
    
  

  
    Loading multiple versions of jQuery!
    
      ;(function($){
        var $h2 = $('').append('Original jQuery: ' + $.fn.jquery + ' | Original ui: ' + $.ui.version);
        document.write($h2[0].outerHTML);
      })(jQuery);
    
    Some other html

  

    
    
      ;(function($){
        window.myJQuery = jQuery.noConflict(true);
      })(jQuery);
    
    
    

   

    
      ;(function($){
        var $h2 = $('').append('Original jQuery: ' + $.fn.jquery + ' | Original ui: ' + $.ui.version + ' | After namespacing');
        document.write($h2[0].outerHTML);
        window.setTimeout(function(){
          $('h2').not('.namespaced')
            .addClass('not-namespaced')
            .hide()
            .draggable()
            .toggle( "highlight" );
        }, 2000);
      })(jQuery);
    
  

JavaScript:

;(function($, jQuery){

  var $h2 = $('').append('Namespaced $: ' + $.fn.jquery + ' | $.ui: ' + $.ui.version);
  document.write($h2[0].outerHTML);

  var $jh2 = $('').append('Namespaced jQuery: ' + jQuery.fn.jquery + ' | jQuery.ui: ' + jQuery.ui.version);
  document.write($jh2[0].outerHTML);

  //Verify that jQueryUi works on OUR version of jQuery:
  $(document).ready(function(){
    console.log($('h2.namespaced').draggable());
  });

})(myJQuery, myJQuery);

I've worked for a media company where ads had to run with their own version of JavaScript libraries, in the end we preferred to let ads run in their own iframe. Especially since some ads required access to document.write which creates havoc to your content ;)

It is a bit scary that your solution has to modify jquery-ui.js, I would be very (very) hesitant to do that. I also dont understand why you employ })(myJQuery, myJQuery); there, since you know you only need 1 of the parameters to initialize jQuery UI.

The worst part is that I played around a bit with a fork and I could not get to a superior solution easily, so if this works for you, then perhaps you should stop researching and just go forth ;)

StackExchange Code Review Q#47494, answer score: 5