Invoke up to 6 .js files into one

Dev©re · #1 (**permalink**) 12-07-07, 08:37 PM

Hello,

I'm building a newspaper site and I have up to 6 and up to more .js files been called up this way:

Code:

<script src="http://www.domain.com/jvs/script.js" type="text/javascript">

How can I place all of them on one single .js file, that later on can be placed on the page's <head></head> tags invoking all of them at once, I mean, instead of having loads of .js inclusions on the page, I would have one, that calls the main .js on which it calls all the others?

May seem a bit confusing

omniman · #2 (**permalink**) 12-08-07, 07:53 AM

You have a few options...

You can either call the other .js file automatically, or call it only if needed:

javascript Code:

/* call the other .js automatically */
document.write('<script type="text/javascript" src="secondScript.js"><\/script>')
 
/* place logic behind it and call only if needed */
 
/*load method:
   newScript("secondScript.js"); */
 
function newScript(js_src) {
     var js = document.createElement('script');
     js.type = 'text/javascript';
     js.src = js_src;
     document.getElementsByTagName('head')[0].appendChild(js)
}

However, if you are always going to be calling the same ones, I would suggest putting them all in one .js file. This will help speed as the client will only make one HTTP request for the scripts, rather than 6 separate ones.

Dev©re · #3 (**permalink**) 12-08-07, 09:31 AM

One last question, the second option, the.js is called when its needed, automatically, right?

I mean, if the script is required by any plugin, it just call it up without to have to be implemented manually?

omniman · #4 (**permalink**) 12-08-07, 09:34 AM

No, you have to call it manually. But you can check it via logic. The call:

javascript Code:

newScript("secondScript.js");