CODEWITHSUNDEEP
javascriptinternet-explorer-8
Jimm Chen
Jimm Chen

Reputation: 3797

How to include js from js , using IE8

I try the code provided at https://stackoverflow.com/a/950146/151453 , and I successfully verified that I can load my t2.js from t1.js . However, t2.js finish-loading callback works only for Chrome (v26), Firefox （v17), and IE10, but NOT for Microsoft IE8 (Windows 7) .

The symptom on IE8 is: The callback start_deco() is never called.

How can I achieve the same result in IE8? Thank you.

==== Code below ====

t1.html :

<html>
<head></head>

<body>
Hello!

<script src="t1.js"></script>

</body>
</html>

t1.js :

// loadScript function provided by https://stackoverflow.com/a/950146/151453
function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // then bind the event to the callback function 
    // there are several events for cross browser compatibility
    //script.onreadystatechange = callback;  // chj: !!!
    script.onload = callback;

    // fire the loading
    head.appendChild(script);
}

function start_deco()
{
    alert('Done t2.js.');
    loadScript('t3.js.');
}

loadScript('t2.js', start_deco) // wish to load jquery.js etc

t2.js :

console.log('Loading t2.js...')

t3.js :

console.log('Loading t3.js...')

enter image description here

============== UPDATE1 =================

On IE8, if I enable script.onreadystatechange = callback; in loadScript() , the alert box does pop up, however, calling loadScript('t3.js.'); fails with "Not implemented error" on that line so that t3.js fails to load. Image below:

enter image description here

Upvotes: 2

Views: 3294

Answers (3)

Jimm Chen
Jimm Chen

Reputation: 3797

Oh, I got it. It was my fault! The loadScript() provide by https://stackoverflow.com/a/950146/151453 is utterly workable on IE8 and Firefox, Chrome.

And, in order for it to work in IE9+, I have to follow this Microsoft suggestion: http://msdn.microsoft.com/en-us/library/ie/hh180173(v=vs.85).aspx .

It is my fault to comment out the script.onreadystatechange = callback; statement.

The "Not implemented" error shown on my IE8 console is due to missing callback parameter when calling loadScript('t3.js.'); .

So, to fix this problem, I should add a line to loadScript(), the final result is:

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    if(!callback) callback = function(){}; // ★★★★★★★★★ JUST ADD THIS LINE!

    // bind the event to the callback function 
    if(script.addEventListener) {
      script.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
    } 
    else if(script.readyState) {
      script.onreadystatechange = callback; // IE8
    }

    // fire the loading
    head.appendChild(script);
}

Verified on IE8, IE9, Firefox 17, Chrome 27 .

Upvotes: 3

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

IE8 and older handle the script object a bit differently - they don't expose an onLoad event but an onReadyStateChange event. You can take a look at Mootools' Asset.javascript function at https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js for a good example. You're mainly looking for this part:

if (!script.addEventListener){
  script.addEvent('readystatechange', function(){
    if (['loaded', 'complete'].contains(this.readyState)) load.call(this);
  });
} else {
  script.addEvent('load', load);
}

It should be noted of course that situations like this are one of the prime reasons for always using a library like Mootools or jQuery, to exactly avoid problems like this.

Upvotes: 1

Brian Salta
Brian Salta

Reputation: 1576

I know it isn't from js, but is this an option?

<html>
    <head></head>
    <body>
        Hello!

        <script src="t1.js"></script>
        <!--[if IE 8]>
            <script src="t2.js"></script>
        <![endif]-->
    </body>
</html>

Upvotes: 0

Related Questions