how do i include a source file in javascript?

Question

i moved some code in a separate file for reuseability but i can't determine how to include it in my code. e.g: #include in c++ and require_once 'source_file.php'.

so how do you do it in javascript?

Answer 1

Here's a simple example...



base page includes first script file

















~~~~~~~~~~



first script file is like

// first.js



// whatever script steps are specific to this js file

// additionally:

function includeJsFiles() {

var otherScripts = [

'second.js',

'third.js'

]

var head = document.getElementsByTagName( 'HEAD' )[0];

var last = otherScripts.length;

for (var i = 0; i < last; i++) {

var script = document.createElement( 'SCRIPT' );

script.src = otherScripts[ i ];

head.appendChild( script );

}

}



window.onload = includeJsFiles;



~~~~~~~~~~



second script file for demo



// second.js



alert('second JS file included by first');



~~~~~~~~~~



third script file for demo

// third.js



alert('third JS file included by first');





This can be extended indefinitely by adding more filenames to the {includeJsFiles} array in the first.js.



By the way, on a tangential note, you can dynamically include external HTML, text, etc., by using the XMLHttpRequest object to mediate the process (what we so cavalierly call "AJAX"), so long as the external content is in the same domain of origin as the base page. Probably a question for another day.

Answer 2

You can't include HTML inside a JavaScript functon, so your added detail code will break...



Check this out: http://www.codehouse.com/javascript/articles/external/





Note: The "Language" attribute" has been dropped from the specs, as new browsers always assume that "script" is JavaScript - only IE might require the "language" attribute - but only if you use both JavaScript and VBScript in the same page.



EDIT: The link I gave included points to a page that shows how to call a js file from within JavaScript code; as JavaScript is compiled and run *inside your browser* - NOT on the web server - all script must be available during runtime, or be called using some tricks - regardless of the trickery used - with the exception of Ajax - all scripts that are called from within one base file will be loaded when the page is loading.



If you plan on using the window.onload function, I would advise you to not place that command inside the JS file, but in a separate, inline script right before the tag (after all contents) - that way, the HTML will be done loading and will have been mostly rendered before your script - inside - a - script action kicks in and does more rendering.



You might actually want to consider using Ajax, instead, as that runs independent of the page, and gets called whenever necessary.

Answer 3

no need to put in a function....