Calling multiple .js files from 1 .js files

**rnd me** · Sep 25 '08, 03:57 PM

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.

**ms026057** · Sep 25 '08, 05:12 PM

Originally posted by rnd me

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

Code:

<html>
<script type="javascript" src="1.js"></script>
<script type="javascript" src="2.js"></script>
<script type="javascript" src="3.js"></script>
</html>

now call this sample.js file in a html page

**acoder** · Sep 26 '08, 11:32 AM

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.

Code:

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

**rnd me** · Sep 26 '08, 11:57 AM

Originally posted by acoder

If you want to include JavaScript files within a JavaScript file, use document.write, e.g.

Code:

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.

Code:

 function addScript(url) {
        var xJs = document.createElement("script");
        xJs.type = "text/javascript";
        var h = document.getElementsByTagName("head");
        if (h && h[0]) {
            h[0].appendChild(xJs);
        }
        xJs.src = url;
        return xJs;
    }

**acoder** · Sep 26 '08, 12:02 PM

You're correct, though I assumed that this was to be an included JavaScript file in the head.

**satyen46113** · Oct 7 '08, 07:33 AM

Thanks ...it is working now!
gr8

**zaphod42** · Oct 7 '08, 04:39 PM

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.....als o, 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:):

Code:

initer=function(){
	GL.input=document.createElement('textarea');
	document.body.appendChild(GL.input);
	GL.input.width=150+'px';
	GL.inputButt=document.createElement('div');
	document.body.appendChild(GL.inputButt);
	GL.inputButt.style.position='absolute';
	GL.inputButt.style.top=GL.input.offsetTop+'px';
	GL.inputButt.style.left=200+'px';
	GL.inputButt.innerHTML='Add';
	GL.inputButt.onmouseup=function(evt){loadScript(evt)};
	GL.inputButt.switcher='Add';
	GL.inputButt2=document.createElement('div');
	document.body.appendChild(GL.inputButt2);
	GL.inputButt2.style.position='absolute';
	GL.inputButt2.style.top=(GL.inputButt.offsetTop+GL.inputButt.offsetHeight)+'px';
	GL.inputButt2.style.left=200+'px';
	GL.inputButt2.innerHTML='Set';
	GL.inputButt2.onmouseup=function(evt){loadScript(evt)};
	GL.inputButt2.switcher='Set';
	GL.sDiv=document.createElement('div');
	document.body.appendChild(GL.sDiv);
	GL.docBod=document.createElement('div');
	document.body.appendChild(GL.docBod);
}
loadScript=function(evt,switcher){
	var target=switcher?false:GL.getTarget(evt);
	var switcher=switcher || target.switcher;
	GL.nScript=GL.nScript || new Object();
	switch(switcher){
		case 'Set':
			GL.sDiv.parentNode.removeChild(GL.sDiv);
			GL.sDiv=document.createElement('div');
			document.body.appendChild(GL.sDiv);
			document.body.removeChild(GL.docBod);
			GL.docBod=document.createElement('div');
			document.body.appendChild(GL.docBod);
			setTimeout("init()",500);
		case 'Add':
			if(GL.nScript[GL.input.value]){GL.nScript[GL.input.value].parentNode.removeChild(GL.nScript[GL.input.value]);GL.nScript[GL.input.value]=false};
			GL.nScript[GL.input.value]=document.createElement('script');
			GL.nScript[GL.input.value].type='text/javascript';
			GL.nScript[GL.input.value].src=GL.input.value+'.js';
			GL.sDiv.appendChild(GL.nScript[GL.input.value]);
	}
	init=null;
	return (GL.nScript[GL.input.value]);
}

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

**zaphod42** · Oct 8 '08, 03:02 AM

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:

Code:

LoadScript.include(scriptName)

don't call 'add' directly...othe r than that it works like an include/require script loader:)

Code:

LoadScript={
	include:function(s){
		if(!GL.sDiv){
			GL.sDiv=document.createElement('div');
			document.body.appendChild(GL.sDiv);
		}
		if(GL.sDiv[s]){GL.sDiv.removeChild(GL.sDiv[s])}
		GL.sDiv[s]=LoadScript.add(s)
	},
	require:function(s){
		if(!GL.sDiv){
			GL.sDiv=document.createElement('div');
			document.body.appendChild(GL.sDiv);
		}
		GL.sDiv[s]=GL.sDiv[s] || LoadScript.add(s);
	},
	add:function(s){
		GL.sDiv[s]=document.createElement('script');
		GL.sDiv[s].type='text/javascript';
		GL.sDiv[s].src=s+'.js';
		GL.sDiv.appendChild(GL.sDiv[s])
	}
}

Calling multiple .js files from 1 .js files

Calling multiple .js files from 1 .js files

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment