How to add javascript file dynamically in the head of html?

Question

From below code I am trying to load javascript file TestJScript.js dynamically and after loading want to call javascript function LoadData() exist in that file. But I am getting error please check image.

Note: Error get only on IE-8.0.6001 update 0.

Please suggest me correction such that It will work from 6 to all version of IE. Or any another solution.

if it require any windows updates. Please let me know.

Please don't suggest with JQUERY code

Javascript file code :

function LoadData() {   
    alert('ok');
}

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <script>

            function LoadJSFile() {

                    var js = document.createElement("script")
                    js.setAttribute("type", "text/javascript")
                    js.setAttribute("src", "C:\\TestJScript.js")                    
                    document.getElementsByTagName("head")[0].appendChild(js)

                    //call below function exist in TestJScript.js file
                    LoadData();
                }              

        </script>
      </head>
<body onload="LoadJSFile();">

</body>
</html>

Error Image: enter image description here

@prM Maybe it's a virtual machine and be was just testing... — Farid Nouri Neshat, Jun 23 '14 at 13:18
@FaridNouriNeshat true! oh, and xhtml, onload, src="C:\\...".. — pochen, Jun 23 '14 at 13:20
I am making windows application which uses WebBrowser control. Hence I am depends on IE only. bcoz I will never touch client machines to install updates. — Sam, Jun 23 '14 at 13:31
You could try loading the script as mentioned in [this answer](http://stackoverflow.com/a/14521482/). — chridam, Jun 23 '14 at 13:31

score 0 · Answer 1 · answered Jun 23 '14 at 13:19

Try this http://dustindiaz.com/scriptjs. Like this:

$script('yui-base.js', function() {
  // do stuff with base...
  $script(['yui-anim.js', 'yui-connect.js'], function() {
    // do stuff with anim and connect...
  });
  $script('yui-drag.js', function() {
    // do stuff with drag...
  });
});

score 0 · Answer 2 · answered Jun 23 '14 at 13:22

0

The error reports a problem in the javascript file that you're loading. So the problem lies not in how you dynamically load the javascript file, but in the javascript file itself.

answered Jun 23 '14 at 13:22

marty

651
7
13

As I said, It is not working on IE-8 Only. I have added script file code also. – Sam Jun 23 '14 at 13:27
Have you tried putting directly in your html, to see if that gives errors? – marty Jun 23 '14 at 15:05

score 0 · Answer 3 · edited Jun 23 '14 at 13:54

0

It looks like there is a problem with the file once it has loaded. Are you sure there is no syntax error in the file itself.

Also, I would recommend you use a relative path to the javascript file instead of the absolute path.

EDIT:

Try this:

function LoadJSFile() {
  var script = document.createElement('script');
  script.src = "C:\\TestJScript.js";
  script.onload = function () {
    LoadData();
  };

   document.getElementsByTagName("head")[0].appendChild(script)     
}

edited Jun 23 '14 at 13:54

Sam

433
1
10
26

answered Jun 23 '14 at 13:26

Husman

6,819
9
29
47

Husman, It works on all IE version except IE-8. I have added script file code also. – Sam Jun 23 '14 at 13:37

score 0 · Answer 4 · answered Jun 23 '14 at 14:03

You could try the following:

<script>
function LoadJSFile(src, callback) {
    var js = document.createElement('script');
    js.src = src;
    js.async = true;
    js.onreadystatechange = js.onload = function() {
        var state = js.readyState;
        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };
    document.getElementsByTagName('head')[0].appendChild(js);
}
LoadJSFile('C:\\TestJScript.js', function() { 
    LoadData();
});
</script>

score 0 · Accepted Answer · answered Jun 27 '14 at 12:01

If you are using c# code then another solution to solve this script error is, invoke script through c# code. Code:

/

/Assiging html value to control
                webBrowser.DocumentText = "HTML content";               
//Calling document load completed event
                webBrowser.DocumentCompleted += webBrowser_DocumentCompleted;

void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {                
            HtmlDocument htmlDocument = webBrowser.Document;
            HtmlElement htmlElementHead = htmlDocument.GetElementsByTagName("head")[0];
            HtmlElement HtmlElementScript = htmlDocument.CreateElement("script");
            HtmlElementScript.SetAttribute("text", "C:\\TestJScript.js");
            htmlElementHead.AppendChild(HtmlElementScript);
            htmlDocument.InvokeScript("LoadData");
            webBrowser.DocumentCompleted -= webBrowser_DocumentCompleted;
        }

How to add javascript file dynamically in the head of html?

5 Answers5