Use AJAX to Auto Include a Javascript File / Function An XMLHTTP request has the capability to completely stall any script activity. A function to return a cross-browser XMLHTTP Object: function getXMLHttpObj(){ if(typeof(XMLHttpRequest)!='undefined') return new XMLHttpRequest(); var axO=['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'], i; for(i=0;i<axO.length;i++) try{ return new ActiveXObject(axO[i]); }catch(e){} return null; } Most browsers other than Internet Explorer 5 or 6 have a built-in XMLHttpRequest object. Internet Explorer 7, when it's released, will also have this object natively. The first thing we do is check to see if this object exists. If it does, we create an instance of it and that's it. If the object doesn't exist, we attempt to create one of several ActiveX Objects. We don't know what objects our users have installed, so we attempt to create several different XMLHTTP objects, starting with the newest ones. In order to dynamically load functions, we first need to define them. We could do this one function at a time, but instead of hard-coding dozens of functions, we can choose to just make an object or array with all the file names and the functions you want to have auto-included: var autoIncludeFunctions = { 'scripts/file1.js': ['function1', 'function2', 'function3'], 'scripts/file2.js': ['function4', 'function5', 'function6'], 'scripts/file3.js': ['function7', 'function8', 'function9'] } The autoIncludeFunctions object should contain a list of JavaScript files, as well as a list of functions in those files. The above is shorthand JavaScript notation to create both the object and the arrays. Note that if any of these files contain functions with the same name as another file, only the last function listed will be used. The following function that will pull a JavaScript file down and execute it. It's very important, in this case, that the third paramater sent to the XMLHTTP object be false. This forces the script to wait for the response to download as opposed to continuing on with other code: function loadScript(scriptpath, functions) { var oXML = getXMLHttpObj(); oXML.open('GET', scriptpath, false); oXML.send(''); eval(oXML.responseText); for(var i=0; i<functions.length; i++) window[functions[i]] = eval(functions[i]); } The third argument sent to the open() function of an XMLHTTP object controls the state of the XMLHTTP object. If set to true, the object runs asynchrounously, meaning that all other JavaScript code continues while the object is loading. Many times this argument will be set to true, as setting it to false can lockup the browser window if the url is bad or connectivity is slow. When the code is evaluated from the responseText, it's executed in the limited scope of the loadScript function and because of this, none of these functions will be available outside of the loadScript function. In order do get around this, the for loop adds each function to the window object, thus making it globally available. It's important to note that only scripts on the same server as the current page can be called in this manner. This is inherent to the XMLHTTP Object and is a necessary measure to increase general browser security. The following is a for each function that we want to auto-load for demonstration. When these "fake" functions are called, they will load the real file and then re-execute the real function: for(var fileName in autoIncludeFunctions) { var functionNames = autoIncludeFunctions[fileName]; for(var i=0; i<functionNames.length; i++) { var functionName = functionNames[i]; window[functionName] = function() { loadScript(fileName, functionNames); var execCode = functionName+'( '; for(var i=0; i<arguments.length; i++) execCode+='arguments['+i+'],'; execCode = execCode.substr(0, execCode.length-1)+')'; return eval(execCode); } } } The first part is relatively simple. The for loop is looping through the list of files, one at a time, and then looping through each function in those files: window[functionName] = function() { loadScript(fileName, functionNames); Here, we're using a global setting for our new "fake" function. We use the window object so that this function will be available through the code. Inside of this function, we're calling the loadScript function. After this is called, our fake global function is replaced with the real one. The next part calls the real function with all of the parameters passed to the fake one: var execCode = functionName+'( '; for(var i=0; i<arguments.length; i++) execCode+='arguments['+i+'],'; execCode = execCode.substr(0, execCode.length-1)+');'; The for loop is generating a string with which to call our real function, the 'arguments' object contains all of the parameters passed into the for each function. We loop through the arguments object so that we can pass each and every parameter sent to this fake function on to the real one. At the end, this string will look something like "functionName(arguments[0], arguments[1], arguments[2]);". return eval(execCode); Now execCode is a string containing the proper call to our real function, it just has to be executed. Our real function has now replaced the fake one so that we don't have to go through all of this again, and it's been called. Any value that the real function would return gets sent to the original calling code as it should. Remember, any scripts that are loaded must be on the same server. Any functions in a script file that are not defined in the autoIncludeFunctions variable will not be globally accessible. So if your file 'file1.js' has 20 functions in it, in the above example only three of them will be available for use. One solution to this is to define all of your functions in the javascript as "window.functionName = function(){" instead of "function functionName(){".