Import JavaScript file in JavaScript function

Question

Possible Duplicates: Include a JavaScript file in a JavaScript file How to include a JavaScript file in another JavaScript file?

What is the best way to import a JavaScript file, for example file.js, in a JavaScript function()?

For example, what is the best way to replace the todo statement:

function doSomething() {
   if (xy.doSomething == undefined) {
      // TODO: load 'oldVersionPatch.js'
   }
   ...
}

Possibly the best solution is to create script element and add it into the HTML page.

Is it better to add/append it into head, or body (what will load when)?
Is it better to use JavaScript or jQuery (what is more cross-browser compatible)?

yes, but there have been many answers. I am not sure if it is better to add the script to head, body (what will load when), to use jquery or standard javascript (what is more cross browser compatible) — Matej Tymes, May 05 '11 at 10:32

score 7 · Accepted Answer · answered May 05 '11 at 10:29

http://api.jquery.com/jQuery.getScript/

or

(function(){
  this.__defineGetter__("__FILE__", function() {
    return (new Error).stack.split("\n")[2].split("@")[1].split(":").slice(0,-1).join(":");
  });
})();

(function(){
  this.__defineGetter__("__DIR__", function() {
    return __FILE__.substring(0, __FILE__.lastIndexOf('/'));
  });
})();

function include(file,charset) {
    if (document.createElement && document.getElementsByTagName) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', __DIR__ + '/' + file);
        if(charset){
            script.setAttribute('charset', charset);
        }
        head.appendChild(script);
    }
}

ok, I used the jquery style: $.getScript('xyz.js', function() {}); Thank you. — Matej Tymes, May 05 '11 at 10:38

score 6 · Answer 2 · answered May 05 '11 at 10:22

6

  var filename = 'oldVersionPatch.js';
  var js = document.createElement('script');
  js.setAttribute("type","text/javascript");
  js.setAttribute("src", filename);
  document.getElementsByTagName("head")[0].appendChild(js);

.. should do it

answered May 05 '11 at 10:22

Atticus

6,585
10
35
57

score 2 · Answer 3 · edited Sep 28 '13 at 10:55

2

Very simply, in JavaScript create a <script> element, append the src attribute with whatever the URL is and attach to the DOM. That should do it.

edited Sep 28 '13 at 10:55

Peter Mortensen

30,738
21
105
131

answered May 05 '11 at 10:21

Richard H

38,037
37
111
138

score 2 · Answer 4 · edited Sep 28 '13 at 10:56

2

You have to make your code asynchronous to gain this:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = yourJavascriptFileLocation;
script.onload = script.onreadystatechange = function() {
    if (!script.readyState || script.readyState === 'complete') {
        /* Your code rely on this JavaScript code */
    }
};
var head = document.getElementsByTagName('head')[0];
// Don't use appendChild
head.insertBefore(script, head.firstChild);

edited Sep 28 '13 at 10:56

Peter Mortensen

30,738
21
105
131

answered May 05 '11 at 10:27

otakustay

11,817
4
39
43

why shouldn't I use appendChild? – Matej Tymes May 05 '11 at 10:29
1

if there is as `` element in `` section that is the last child of ``, `appendChild` in IE6 would result in buggy behavior, that is, the whole DOM is appended to the `` element :) – otakustay May 05 '11 at 10:31

Import JavaScript file in JavaScript function

4 Answers4