By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,985 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Calling multiple .js files from 1 .js files

P: 3
Hi all
Something I need help on.

I have several .js file and I was wondering if it was possible if I could call all of them with just one .js file.
thanks in advance
waiting for reply
Sep 25 '08 #1
Share this Question
Share on Google+
8 Replies


rnd me
Expert 100+
P: 427
not sure what you mean by "call a file".

unlike compiled languages, javascript doesn't care where the source code comes from.
you can combine or detach code in any number of files.
keep in mind that some code has dependencies , so keep the code load order the same.
Sep 25 '08 #2

P: 4
not sure what you mean by "call a file".

unlike compiled languages, javascript doesn't care where the source code comes from.
you can combine or detach code in any number of files.
keep in mind that some code has dependencies , so keep the code load order the same.

yes it is possible...
eg. save the following file as sample.js
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="javascript" src="1.js"></script>
  3. <script type="javascript" src="2.js"></script>
  4. <script type="javascript" src="3.js"></script>
  5. </html>
  6.  
now call this sample.js file in a html page
Sep 25 '08 #3

acoder
Expert Mod 15k+
P: 16,027
That's not JavaScript and the type attribute is incorrect.

If you want to include JavaScript files within a JavaScript file, use document.write, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.write("<script type='text/javascript' src='f1.js'><\/script>");
Sep 26 '08 #4

rnd me
Expert 100+
P: 427
If you want to include JavaScript files within a JavaScript file, use document.write, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.write("<script type='text/javascript' src='f1.js'><\/script>");
if the page has completed, the above code would kill the page.

use a function to add other script after (or during for that matter) load.



Expand|Select|Wrap|Line Numbers
  1.  function addScript(url) {
  2.         var xJs = document.createElement("script");
  3.         xJs.type = "text/javascript";
  4.         var h = document.getElementsByTagName("head");
  5.         if (h && h[0]) {
  6.             h[0].appendChild(xJs);
  7.         }
  8.         xJs.src = url;
  9.         return xJs;
  10.     }
  11.  
Sep 26 '08 #5

acoder
Expert Mod 15k+
P: 16,027
You're correct, though I assumed that this was to be an included JavaScript file in the head.
Sep 26 '08 #6

P: 3
Thanks ...it is working now!
gr8
Oct 7 '08 #7

P: 55
fyi...js files don't have to me loaded in the head, this code essentially works as an "include / require" script just save it as "sciptTest.js" or whatever, and you can actually just type the name of the javascript file into the textarea...Set overwrites any the file if it already exists, and add just adds it if it isn't already there...this is just a basic idea, you can obviously call this function from within other scripts.....also, as mentioned above, if you have functions in seperate scripts that work together, you must make sure you load the scripts in the right order or they won't work:):

Expand|Select|Wrap|Line Numbers
  1. initer=function(){
  2.     GL.input=document.createElement('textarea');
  3.     document.body.appendChild(GL.input);
  4.     GL.input.width=150+'px';
  5.     GL.inputButt=document.createElement('div');
  6.     document.body.appendChild(GL.inputButt);
  7.     GL.inputButt.style.position='absolute';
  8.     GL.inputButt.style.top=GL.input.offsetTop+'px';
  9.     GL.inputButt.style.left=200+'px';
  10.     GL.inputButt.innerHTML='Add';
  11.     GL.inputButt.onmouseup=function(evt){loadScript(evt)};
  12.     GL.inputButt.switcher='Add';
  13.     GL.inputButt2=document.createElement('div');
  14.     document.body.appendChild(GL.inputButt2);
  15.     GL.inputButt2.style.position='absolute';
  16.     GL.inputButt2.style.top=(GL.inputButt.offsetTop+GL.inputButt.offsetHeight)+'px';
  17.     GL.inputButt2.style.left=200+'px';
  18.     GL.inputButt2.innerHTML='Set';
  19.     GL.inputButt2.onmouseup=function(evt){loadScript(evt)};
  20.     GL.inputButt2.switcher='Set';
  21.     GL.sDiv=document.createElement('div');
  22.     document.body.appendChild(GL.sDiv);
  23.     GL.docBod=document.createElement('div');
  24.     document.body.appendChild(GL.docBod);
  25. }
  26. loadScript=function(evt,switcher){
  27.     var target=switcher?false:GL.getTarget(evt);
  28.     var switcher=switcher || target.switcher;
  29.     GL.nScript=GL.nScript || new Object();
  30.     switch(switcher){
  31.         case 'Set':
  32.             GL.sDiv.parentNode.removeChild(GL.sDiv);
  33.             GL.sDiv=document.createElement('div');
  34.             document.body.appendChild(GL.sDiv);
  35.             document.body.removeChild(GL.docBod);
  36.             GL.docBod=document.createElement('div');
  37.             document.body.appendChild(GL.docBod);
  38.             setTimeout("init()",500);
  39.         case 'Add':
  40.             if(GL.nScript[GL.input.value]){GL.nScript[GL.input.value].parentNode.removeChild(GL.nScript[GL.input.value]);GL.nScript[GL.input.value]=false};
  41.             GL.nScript[GL.input.value]=document.createElement('script');
  42.             GL.nScript[GL.input.value].type='text/javascript';
  43.             GL.nScript[GL.input.value].src=GL.input.value+'.js';
  44.             GL.sDiv.appendChild(GL.nScript[GL.input.value]);
  45.     }
  46.     init=null;
  47.     return (GL.nScript[GL.input.value]);
  48. }
P.S. in this snippet, "Set" also fires "init". So if you want to load a file and initialize it, that works nicely, remember that when you load a new script, any functions that are named like existing functions will be overwritten
Oct 7 '08 #8

P: 55
I know this seems resolved, but I had a project I needed my script loader for, and I suddenly realized it wasn't what I thought it was LoL so here is my actual loader, you need a global property called "GL" for it to run, and the body needs to be loaded first, but that's all...it's called like:

Expand|Select|Wrap|Line Numbers
  1. LoadScript.include(scriptName)
don't call 'add' directly...other than that it works like an include/require script loader:)

Expand|Select|Wrap|Line Numbers
  1. LoadScript={
  2.     include:function(s){
  3.         if(!GL.sDiv){
  4.             GL.sDiv=document.createElement('div');
  5.             document.body.appendChild(GL.sDiv);
  6.         }
  7.         if(GL.sDiv[s]){GL.sDiv.removeChild(GL.sDiv[s])}
  8.         GL.sDiv[s]=LoadScript.add(s)
  9.     },
  10.     require:function(s){
  11.         if(!GL.sDiv){
  12.             GL.sDiv=document.createElement('div');
  13.             document.body.appendChild(GL.sDiv);
  14.         }
  15.         GL.sDiv[s]=GL.sDiv[s] || LoadScript.add(s);
  16.     },
  17.     add:function(s){
  18.         GL.sDiv[s]=document.createElement('script');
  19.         GL.sDiv[s].type='text/javascript';
  20.         GL.sDiv[s].src=s+'.js';
  21.         GL.sDiv.appendChild(GL.sDiv[s])
  22.     }
  23. }
Oct 8 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.