3

I have a library of JS code to load from a folder. Instead of typing the <script src='...'></script> lines one by one in the tag of the HTML document, is there a way of just link one Javascript file which organizes and automatically load other javascript files.

I know the Dojotoolkit is using this technique where only one JS file is loaded onto the client's computer, and once the code has been requested in the browser, 20 other JS code each with <script> tag are generated.

3
  • Google for LabJS and RequireJS. Commented Aug 28, 2010 at 12:46
  • duplicate: stackoverflow.com/questions/21294/… Commented Aug 28, 2010 at 12:47
  • Not duplicate, other question is for the Prototype framework. This one is for vanilla javascript. Commented Aug 28, 2010 at 12:58

3 Answers 3

5

This is the code you need:

    // Create
    var bodyEl = document.body;
    var scriptEl = document.createElement('script');
    scriptEl.type = 'text/javascript';
    scriptEl.src = url;
    bodyEl.appendChild(scriptEl);

Put that into a function, have an array of all the javascript files, and call that function for each file.

Benefits of using the DOM is that document.write doesn't work in some funny instances. More about this here: document.write() vs inserting DOM nodes: preserve form information?

Code taken from the open source project jQuery Sparkle: http://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/jquery.appendscriptstyle.js#L103

Sign up to request clarification or add additional context in comments.

12 Comments

It's not necessary to set the "type" attribute.
@Pointy while it will work without it, it is still a required attribute: w3schools.com/TAGS/tag_script.asp and google.com.au/…
Most contemporary Javascript experts (Doug Crockford in particular) encourage omission of the attribute, and it's explicitly not needed in HTML5. Besides that, the HTML spec is irrelevant when you're building DOM nodes.
will this sacrifice loading time? Is using prototype faster?
@Pointy: I'd love to read what Doug had to say on that topic as I also always include the type attribute for completeness.
|
1

A simple way to do that:

document.write("<script type='text/javascript' src='b.js'></script>"); 

4 Comments

Using document.write is generally strongly deprecated. The same effect can be achieved by adding a <script> tag to the document.
Valid, but I like it's simplicity and it's low characters consumption.
document.write isn't deprecated. It's in the HTML 5 spec for a start: w3.org/TR/html5/embedded-content-0.html#dom-document-write
Also, adding a <script> element to the document does not have the same effect: using document.write is synchronous (as is including a <script> element in HTML) while adding a <script> element using DOM methods is asynchronous. The synchronous approach has advantages, for example being guaranteed to have loaded before scripts that appear after it in the document.
0

Try use requireJs, he have very userful functions

Official website

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.