CODEWITHSUNDEEP
javascriptjqueryinternet-explorerinternet-explorer-8internet-explorer-9
CR47
CR47

Reputation: 923

Can't get jQuery to load in IE8 or IE9

I have a header that runs off a js file which can be included on other people's sites, however in IE8 and IE9, I get:

'$' is undefined

in the console.

My code only utilizes jQuery if it is IE8 or IE9 because of cross domain issues which are taken care of with the built in functions in the jQuery library. When browsing on WordPress sites the included script works fine, but on another site without jQuery loaded beforehand, it does not work, and the code I use to include jQuery in the header before loading the jQuery code also does not work.

var isIE = getInternetExplorerVersion();
if (isIE == 8 || isIE == 9) {

  // Insert jQuery <script> to <head>.
  var head = document.getElementsByTagName( 'head' )[0], script;
  script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
  head.insertBefore( script, head.lastChild );

  // Run jQuery test
  $('html').click(function(){
    // Runs without issue on sites that ALREADY have jQuery loaded when IN IE.
    alert('Clicked while in IE');
  });

} else {
   // Runs without issue when not on IE.
   alert('Not in IE');
}

For those wondering, this is the function for figuring out the IE version (irrelevant in this case as it works):

function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer');
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

        if (re.exec(ua) != null) rv = parseFloat( RegExp.$1 );
    }
    return rv;
}

Upvotes: 0

Views: 1337

Answers (3)

CR47
CR47

Reputation: 923

First, thank you for all of your answers.

While they were helpfull they could not solve the issue since jQuery must exist on the page before this page is loaded, and injecting it into the head even after this js file is loaded will not work.

To solve the issue I've created another js file to come before this one. In that file it checks whether jQuery is on the page and the browser is one that is incompatible with our xdomain script and if it is, then we add the jquery file via script, and add the js file with all of our functionality afterwards.

File 1:

(function(ready) {
  'use strict';
  var isIE = getInternetExplorerVersion();
  if ((isIE == 8 || isIE == 9) && window.jQuery) {
    // On IE and jQuery exists
    return ready;
  } else if (isIE == 8 || isIE == 9) {
    // On IE and jQuery doesn't exit
    var head = document.getElementsByTagName( 'head' )[0];
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
    script.onload = ready;
    document.head.appendChild(script);
    return ready;
  } else {
    // Not on IE
    return ready;
  }
  script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = 'http://www.test.com/path/to/other/js_file.js';
  script.async = true;
  head.insertBefore( script, head.lastChild );
})();

function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) rv = parseFloat( RegExp.$1 );
    }
    return rv;
}

File 2 (js_file.js from above):

(function(ready) {
var isIE = getInternetExplorerVersion();
if (isIE == 8 || isIE == 9) {
  // Run jQuery test
  $('html').click(function(){
    // Runs without issue on sites that ALREADY have jQuery loaded when IN IE.
    alert('Clicked while in IE');
  });
} else {
   // Runs without issue when not on IE.
   alert('Not in IE');
}
})();

Upvotes: 0

Joseph
Joseph

Reputation: 119837

First of all, to solve your problem directly, you are loading the script asynchronously (read: out of order). Therefore, the code after you try loading jQuery doesn't necessarily mean jQuery is loaded at that point. Since you created a script element, you could attach an onload to it

script.onload = function(){
  // This will execute when the script you loaded is loaded
}

To answer the other problem, as to why you're loading jQuery based on a browser version, I suggest you use the latest 1.x.x versions of jQuery. They are compatible with IE6+ as well as newer browsers. No need to check for versions.

Your script could have been condensed to:

;(function(ready){
  if(jQuery) return ready();
  var script = document.createElement('script');
  document.head.appendChild(script);
  script.onload = ready;
  script.src = "path/to/jquery.1.x.x.js";
}(function(){

  // Code here runs when ready

}));

Upvotes: 0

Alain M. Lafon
Alain M. Lafon

Reputation: 1720

You don't need to write custom code to check for the IE version. IE ships this "feature"(;

This is the solution from when jQuery 2.0 was released

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

More on conditional comments for Internet explorer here.

Upvotes: 1

Related Questions