I would like to use an external javascript file in another javascript file. For example, I could store all my global variables in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag. How do I use the globals.js inside the logic.js?
Add a comment
|
5 Answers
Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your globals file before the logic file in the tags:
<script type="text/javascript" src="globals.js" />
<script type="text/javascript" src="logic.js" />
If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop to see if some particular variable is available before calling an init() or whatever function.
2 Comments
tloflin
As an alternative to a polling loop, you could designate a function reference that global.js calls when it's loaded, then have logic.js set that reference to its init() function. Of course, you'll have to include code to make sure the init() function isn't called twice.
document.write('<script type="text/javascript" src="globals.js"></script>');
Edit: Actually, this probably won't work for your purposes, as global.js variables won't be accessible until logic.js completes. You may be able to wrap logic.js in a function that is called after global.js loads. Otherwise I don't think there is a way to do what you're asking.
Comments
function loadExternalJS(TARGET_URL){
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open('GET', TARGET_URL, false);
xhr.send(null);
var code = xhr.responseText;
var dScript = document.createElement('script');
try {
dScript.appendChild( document.createTextNode(parsed) );
document.body.appendChild(dScript);
} catch(e) {
dScript.text = parsed;
document.getElementsByTagName('head')[0].appendChild(dScript);
}
xhr = null;
}
2 Comments
Marc B
This'd work, but only if the parsing of the OP's logic.js doesn't depend on the presence of anything defined in the globals.js. Let's say he instantiates some object created in globals. If globals isn't loaded yet, that'll kill logic.js. Of course, a proper init() function done with jquery's ready() or mootools domready would fix that.
You can also do something like this:
$(document).ready(function(){
$('body').append($('<script src="/path/to/script/foo.min.js"></script>'));
});
Just use that line before you need to reference something in the included js file.
Comments
Just make sure both files are referenced in your index.html.
2 Comments
mare
The order is important however as Marc puts it.
David Menard
thanks, this works fine, just out of curiosity, is there a way to not use the <script> tag in the html and still reference the other external js file?