Script onreadystatechange race conditions in Internet Explorer for multiple jQuery versions

Question

imagine the following setting: Page with an old version of jQuery (say 1.5.2) - I have no control over downloading a Javascript file from my servers, which also requires jQuery, but a later version. (e.g. 1.8.3) Now my script is trying to do the following:

var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"); script.onreadystatechange = function() { // IE if (script.readyState === "complete" || script.readyState === "loaded") { ready(); } }; script.onload = function() { // other browsers ready(); }; (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script); 

The ready function then checks to see if $ correct jQuery version, and if so, it associates this jQuery instance with another variable and returns $ to the original jQuery version via newjQuery = window.jQuery.noConflict(true); .

Now it works fine and dandy, and there is no (external) code execution between downloading the "my" version of jQuery and restoring $ to the "their" version of jQuery - at least in Chrome, Firefox, etc. When this approach does not work, it is Internet Explorer, which for some reason processes at least one more “tick” of Javascript code, which can work in parallel. This tends to mess up code that is incompatible with the “my” version of jQuery and happens to run in 5 ms, where IE has not yet completed the finished event.

Here is an example script: http://jsfiddle.net/w5pPp/3/

In the fiddle, I am testing the current version of jQuery with an accuracy of 10 ms. Only in IE9 sometimes there is a short time when $ refers to "my" jQuery, as stated in the journal "THIS SHOULD NOT HAPPEN."

Now my question is: What would be the best solution for loading the “my” version of jQuery into its own variable without any problems when executing the page code in a short amount of time, where it overwrites “its” jQuery before calling noConflict?

Answer 1

When you download your jQuery version, try the following:

 <!-- load your jQuery version --> <script type="text/javascript" src="http://example.com/jquery-1.9.1.js"></script> <script type="text/javascript"> var $_mine = $.noConflict(true); </script> <!-- initialize their scripts --> <script type="text/javascript" src="http://example.com/their-jquery.js"></script> <script type="text/javascript" src="http://example.com/their-script.js"></script> 

This should lead to the fact that you have $_mine to use your jQuery version without conflict with another script, and its use of $ , which will reference the outdated version.

As mentioned in the comment above, refer to Can I use multiple versions of jQuery on the same page? for more information / information / examples.

EDIT

It sounds as if this will not solve your problem, based on the comments above. In this case, my suspicion is that you really see the problem of asynchronous download speeds between your cdn. Try downloading your version of jQuery the same way, one by one.

In other words:

 function loadScript(variable_name, script_url) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", script_url); script.onload = function() { if (variable_name != undefined) { window[variable_name] = jQuery.noConflict(true); console.log("after attach: " + window[variable_name].fn.jquery); } }; (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script); }; loadScript('newjQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'); loadScript('$', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'); //loadScript(undefined, 'http://example.com/some/dependent/script/requiring-1.5.2.js'); 

Here is a working jsFiddle that shows that this method works: http://jsfiddle.net/w5pPp/5/

The trick loads two elements sequentially and loads dependencies after the jQuery version.