SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast indepthmedia's Avatar
    Join Date
    Apr 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issues with loading js files from within other js files

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

    Code:
    <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:

    Code:
    //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. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Google gave me: http://stackoverflow.com/questions/9.../950146#950146 (Post specified by me)
    Which lead me to:
    http://unixpapa.com/js/dyna.html

    Code:
    Code JavaScript:
    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:
    Code JavaScript:
    var test = 'Test';

    test2.js:
    Code JavaScript:
    var test2 = 'Test2';
     
    function hello( str ) {
    	console.log('hello ' + str);
    }
     
    console.log('Test2 is saying hello to Test1\'s var: Hello ' + test);

    html:
    Code HTML4Strict:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •