Issues with loading js files from within other js files

JavaScript
1

I am using the following javascript on a site within the <head> section:

<script type="text/javascript">
	//Establish web analytics and call setup file
	wa = new Object;
	wa.currentURL = location.pathname;
	wa.currentDomain = location.hostname;
	if(wa.currentDomain.indexOf('cde') != -1 || wa.currentDomain.indexOf('test') != -1 || wa.currentDomain.indexOf('staging') != -1) {
		wa.environment = 'dev';
		wa.filePath = '//' + wa.currentDomain + '/scripts/webAnalytics/';
	} else {
		wa.environment = 'prod';
		wa.filePath = '//www.mydomain.com/scripts/webAnalytics/';
	}
	//Function to include other js files
	function addJavascript(jsname,pos) {
		var th = document.getElementsByTagName(pos)[0];
		var s = document.createElement('script');
		s.setAttribute('type','text/javascript');
		s.setAttribute('src',jsname);
		th.appendChild(s);
	}
	//Use the function to call the web analytics setup file
	addJavascript(location.protocol + wa.filePath + 'wa_SETUP.js','head'); 
</script>

This part seems to work just fine but I am also calling two other js files from within my wa_SETUP.js file using the following logic:

//Set the site variable & call the appropriate custom code file
if(wa.currentURL.indexOf("/blahblah/") != -1) {
	wa.site = 'Blah';
	addJavascript(location.protocol + wa.filePath + 'Blah.js','body');
} else if(wa.currentURL.indexOf("/whatever/") != -1) {
	wa.site = 'Whatever';
	addJavascript(location.protocol + wa.filePath + 'Whatever.js','body');
} else {
	wa.site = 'Site Undefined';
}

addJavascript(location.protocol + wa.filePath + 'file3.js','body');

In my actual code I have more else if lines but the above shows my general strategy. Now, when I test this out using Fiddler I can see that all of my files are loading BUT any variables I have set within Blah.js or Whatever.js are not available for use in file3.js (the last file to be called). Any ideas on how I can ensure variables from Blah.js or Whatever.js are available to file3.js? Can I control load order/time somehow and make sure the previous files load before file3.js does?

Thanks!

2

Google gave me: http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file/950146#950146 (Post specified by me)
Which lead me to:
http://unixpapa.com/js/dyna.html

Code:


function loadScript(url, callback) {
	var head = document.getElementsByTagName('head')[0],
		script = document.createElement('script');

		script.type = 'text/javascript';
		script.src = url;
		script.onreadystatechange = callback;
		script.onload = callback

	head.appendChild(script);
}

My rushed & bad test is:

test1.js:


var test = 'Test';

test2.js:


var test2 = 'Test2';

function hello( str ) {
	console.log('hello ' + str);
}

console.log('Test2 is saying hello to Test1\\'s var: Hello ' + test);

html:


<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js"></script>
	</head>
	<body>
		<script>
			function loadScript(url, callback) {
				var head = document.getElementsByTagName('head')[0],
					script = document.createElement('script');
			
					script.type = 'text/javascript';
					script.src = url;
					script.onreadystatechange = callback;
					script.onload = callback
			
				head.appendChild(script);
			}
			loadScript('test2.js', function() {
				hello(test);
				hello(test2);
			});
		</script>
	</body>
</html>

Hopefully this helps you out.