23

Possible Duplicates:Include a JavaScript file in a JavaScript fileHow 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)?
1
  • 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)CommentedMay 5, 2011 at 10:32

4 Answers 4

8

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); } } 
1
  • ok, I used the jquery style: $.getScript('xyz.js', function() {}); Thank you.CommentedMay 5, 2011 at 10:38
7
 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

    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.

      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); 
      2
      • why shouldn't I use appendChild?CommentedMay 5, 2011 at 10:29
      • 1
        if there is as <base> element in <head> section that is the last child of <head>, appendChild in IE6 would result in buggy behavior, that is, the whole DOM is appended to the <base> element :)
        – otakustay
        CommentedMay 5, 2011 at 10:31

      Start asking to get answers

      Find the answer to your question by asking.

      Ask question

      Explore related questions

      See similar questions with these tags.