dynamically appending js script files

Randall · May 23, 2012

When embedding the JS files using a dynamic method similar to how Google does (shown below), there is an unusal error encountered:

Error Line 14: attempt to run compile-and-go script on a cleared scope

<body>
 <script type="text/javascript">
// include Greensock JS Animation Platform script files
var e = document.createElement("script");
e.src = "js/greensock/plugins/CSSPlugin.min.js";
e.type = "text/javascript";
document.body.appendChild(e);
var d = document.createElement("script");
d.src = "js/greensock/easing/EasePack.min.js";
d.type = "text/javascript";
document.body.appendChild(d);
var c = document.createElement("script");
c.src = "js/greensock/TimelineLite.min.js";
c.type = "text/javascript";
document.body.appendChild(c);
var b = document.createElement("script");
b.src = "js/greensock/TweenLite.min.js";
b.type = "text/javascript";
document.body.appendChild(;
 </script>
</body>

When I run the code block above on the non-minified script file versions (removing .min from the file names) I get this error with a tad bit more detail:

Error Line 227: attempt to run compile-and-go script on a cleared scope

_self.time = (_getTime() - _startTime) / 1000;

Any ideas on this? I'm using Firefox 12.0 with FireBug add-on, Vista x64, running on Wamp5 2.0 localhost.

GreenSock · May 23, 2012

From some reading I did, it sounds like a Firefox bug that many people have run into (or possibly a FireBug bug - ha). Some folks say that the timing of your script is critical (can't be done after the document has fully loaded) and some say it can be helped in some situations by doing a hard-refresh (clear the cache). I'm pretty sure this isn't a problem in the GreenSock files themselves.

http://stackoverflow.com/questions/5433415/error-attempt-to-run-compile-and-go-script-on-a-cleared-scope

Gotta love browser bugs and inconsistencies! This is the stuff that makes me appreciate Flash all the more.

Randall · May 24, 2012

Ah ha! Thank you for the help and link. Maybe I should have never updated to Firefox 12? However, I did manage to figure out the issue, which is unusual because I normally use jQuery and this kind of issue is normally avoidable.

Using document.write and document.writeln is the "likely" culprit for any resulting output. I discovered this after search for quite some time about the specific error message and discovered there were a lot of document.write/ln references piling up in my notes.

For instance, after loading the sets of scripts dynamically, the last resulting complete event fires off on the final loaded script. Interestingly, it made no difference if I dynamically added the script elements to the <head> or <body> of the document - though adding to the body of the document seemed to be bit faster for some reason.

Trouble is, that my original code was using document.write to add a dynamic container element after the scripts have loaded, which in some browser versions Firefox causes the compile-and-go cleared scope error and in some IE browser versions caused a null object reference wherever code looked for the container element that was added.

All I had to do to fix this pesky error/bug was the following, which is probably more in line with what we're supposed to be doing anyway (hopefully):

<head>
<script type="text/javascript">
	function loadScript(url, callback){
   	 var script = document.createElement("script")
   	 script.type = "text/javascript";
   	 if(script.readyState){// ie
   		 script.onreadystatechange = function(){
   			 if(script.readyState == "loaded" || script.readyState == "complete"){
   				 callback();
   				 script.onreadystatechange = null;
   			 }
   		 };
   	 }else{// non-ie
   		 script.onload = function(){ callback(); };
   	 }
   	 script.src = url;
   	 // this line below works equally as well
   	 // document.body.appendChild(script);
	 // this line below is what most dev's say is the preferred location
   	 document.getElementsByTagName("head")[0].appendChild(script);
	}
	// normally we would use loop logic here, but stacked the load inside
	// callbacks for testing/debugging to see how many milliseconds go by
	// before any given script is available and ready for reference/usage
	loadScript('js/greensock/TweenLite.min.js', function(){
		loadScript('js/greensock/TimelineLite.min.js', function(){
			loadScript('js/greensock/easing/EasePack.min.js', function(){
				loadScript('js/greensock/plugins/CSSPlugin.min.js', function(){
					loadScript('js/jBanner.js', function(){
						loadScript('js/banner.js', function(){
							jb.construct(); // fires off the banner code
						});						
					});						
				});						
			});					
		});
	});
</script>
</head>
// changed this below...
<body>
 <script type="text/javascript">
// AC method resides in banner.js and is available after jb.construct is invoked
document.write(AC( bc, CC(20,20,300,250,1,1), true, U, true ));
 </script>
</body>
// to this below...
<body>
 <script type="text/javascript">
// AC method resides in banner.js and is available after jb.construct is invoked
document.body.innerHTML += AC( bc, CC(20,20,300,250,1,1), true, U, true );
 </script>
</body>

Anyway, hope this helps other developers avoid the pitfalls of using the document.write and document.writeln. When not using jQuery, there may even be a better approach than merely appending to the innerHTML, but I'm still struggling as a noob to JavaScript after being stuck for nearly a decade in the ActionScript.

Notifications

Messages

dynamically appending js script files

Warning: Please note

Recommended Posts

Randall

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Randall

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members