Javascript Dynamic Script Loading IE problems

Question

I'm trying to load dynamically script with this code:

var headID = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); 
script.type='text/javascript'; 
script.src="js/ordini/ImmOrd.js"; 
script.setAttribute("onload", "crtGridRicProd();");                       
headID.appendChild(script);

I need to launch crtGridRicPrdo() function when the page starts, and in FireFox all works fine but in Internet Explorer I have a problems!

What problems you have with IE ? Is it an error message? Need more details. — Jayantha Lal Sirisena, Jul 04 '11 at 08:16

score 8 · Answer 1 · edited Nov 07 '14 at 11:10

8

Internet explorer does not support "onload" on script tags, instead it offers the "onreadystatechange" (similarly to an xhr object). You can check its state in this way:

script.onreadystatechange = function () {
   if (this.readyState == 'complete' || this.readyState == 'loaded') {
     crtGridRicProd();
   }
};

otherwise you can call crtGridRicProd() at the end of your js file

EDIT

example:

test.js:

function test() {
    alert("hello world");
};

index.html:

<!DOCTYPE html>
<html>

  <head>
    <title>test</title>
</head>
<body>
    <script>
        var head = document.getElementsByTagName("head")[0] || document.body;
        var script = document.createElement("script");

        script.src = "test.js";

        script.onreadystatechange = function () {
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                test();
            }
        };

        script.onload = function() {
            test();
        };

        head.appendChild(script);

    </script>
</body>

you will see the alert in both browser!

edited Nov 07 '14 at 11:10

Dan

55,715
40
116
154

answered Jul 04 '11 at 08:26

daveoncode

18,900
15
104
159

i try with this but not works for me, also in Firefox now not work and withouts show error – Marco Jul 04 '11 at 09:09
i try but not work for me! how can replace this for IE: script.setAttribute("onload", "crtGridRicProd();"); ?? THANKS – Marco Jul 04 '11 at 11:55
I don't understand why are you still using setAttribute(), just attach the handlers like I showed in my example and obviously replace "test()" with "crtGridRicProd()"... it MUST work! – daveoncode Jul 04 '11 at 12:21
IE8 don't returns readyState == 'complete', but 'loaded'. Otherwise works fine, thanks – ijavid Sep 28 '13 at 04:09

score 5 · Answer 2 · answered Oct 23 '12 at 13:10

I use the following to load scripts one after another (async=false):

var loadScript = function(scriptUrl, afterCallback) {
            var firstScriptElement = document.getElementsByTagName('script')[0]; 
    var scriptElement = document.createElement('script');
            scriptElement.type = 'text/javascript';
            scriptElement.async = false;
            scriptElement.src = scriptUrl;

    var ieLoadBugFix = function (scriptElement, callback) {
        if ( scriptElement.readyState == 'loaded' || scriptElement.readyState == 'complete' ) {
            callback();
        } else {
            setTimeout(function() { ieLoadBugFix(scriptElement, callback); }, 100);
        }
    }

    if ( typeof afterCallback === "function" ) {
        if ( typeof scriptElement.addEventListener !== "undefined" ) {
            scriptElement.addEventListener("load", afterCallback, false)
        } else {
            scriptElement.onreadystatechange = function(){
                scriptElement.onreadystatechange = null;
                ieLoadBugFix(scriptElement, afterCallback);
            }
        }
    }
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
}

Use it like this:

loadScript('url/to/the/first/script.js', function() {
    loadScript('url/to/the/second/script.js', function() {
    // after both scripts are loaded
    });
});

One bugfix which the script includes is the latency bug for IE.

"One bugfix which the script includes is the latency bug for IE" I can't find any info on this anywhere, can you explain please — frostymarvelous, Dec 01 '13 at 00:40
Without the ieLoadBugFix I got issues while serving the file with a delay. Force Your server to wait 2s before it returns the file to observe it. — czerasz, Dec 01 '13 at 06:57
How often can this happen? What are the chances? I haven't experienced this yet. — frostymarvelous, Dec 01 '13 at 11:30
Can't remember the details. For us it was an noticable issue. — czerasz, Dec 01 '13 at 21:01

score 0 · Answer 3 · answered Aug 10 '17 at 11:57

For proberly dynamic loading a js-script (or css-file) in IE you must carefully check the path to the loaded file! The path should start from '/' or './'.

Be aware, that IE sometimes loses leading slash - as for instance is described here: https://olgastattest.blogspot.com/2017/08/javascript-ie.html

score 0 · Answer 4 · answered Jul 04 '11 at 08:23

You are loading script from external source. So you need to wait until it loads. You can call your function after id completed.

var headID = document.getElementsByTagName("head")[0]; 
var script = document.createElement('script'); script.type='text/javascript'; 
script.onload=scriptLoaded;
script.src="js/ordini/ImmOrd.js"; script.setAttribute("onload", "crtGridRicProd();");
headID.appendChild(script);

function scriptLoaded(){
// do your work here
}

score 0 · Answer 5 · answered Jul 04 '11 at 08:24

0

When I red your code, I figured out that you try to append an onload event to the script tag.

<html>
 <head>
  <script type="text/javascript" onLoad="crtGridRicPrdo()">
   ...
  </script>
 </head>
 <body>
  ...
 </body>
</html>

This will be the result of your javascript code. Why don't you add it to the body tag? This is the classic way and will defnatly work under IE too. This will also reduce your code:

var bodyID = document.getElementsByTagName("body")[0];
bodyID.setAttribute("onload", "crtGridRicProd();");

answered Jul 04 '11 at 08:24

Reporter

3,897
5
33
47

this is good solution but i have more of this:bodyID.setAttribute("onload", "crtGridRicProd();"); becouse i have to load dynamically different script for every tree menu click – Marco Jul 04 '11 at 09:12
you can add more than one method call. What you have to do is just call methods with different names. – Reporter Jul 04 '11 at 09:40
yes i have to call different metods from differnt js file at every click – Marco Jul 04 '11 at 10:01
i have to insert a is file script every click node, so the html show before that i vae clcik, and i receive undefined crtGridRicProd() error – Marco Jul 04 '11 at 10:35
this has poor IE support – Dan Nov 07 '14 at 11:16

Javascript Dynamic Script Loading IE problems

5 Answers5

Linked