Firefox not blocking script like IE and Chrome 1

[userMikeD]

I need to include an external javascript file, but if it takes over 2 seconds, I want to remove it and block it from running. The following code successfully removes and block the external script from running in IE and Chrome, but not Firefox.

Note: jQuery dependency

var gTimeout, gScript;


$(function() {
	alert("Static page fully loaded. Adding server script.");
	loadScript("[URL unfurl="true"]http://server/script.js",[/URL] afterLoad);
	gTimeout = setTimeout("destroyScript()", 2000);
});


function loadScript(url, callback){
	gScript = document.createElement("script");
	gScript.type = "text/javascript";
	gScript.id = "externalScript";

	if (gScript.readyState) {  //IE
		gScript.onreadystatechange = function() {
			if (gScript.readyState == "loaded" || gScript.readyState == "complete") {
				clearTimeout(gTimeout);
				gScript.onreadystatechange = null;
				callback();
			}
		};
	} else {  //Others
		gScript.onload = function() {
			clearTimeout(gTimeout);
			callback();
		};
	}

	gScript.src = url;
	document.documentElement.insertBefore(gScript, document.documentElement.firstChild);
}


function afterLoad() {
	clearTimeout(gTimeout);
}


function destroyScript() {
	gScript = null;
	$("#externalScript").remove();
	alert("Script took too long and was removed");
}

Any idea why the external script still runs in Firefox, even after I reset the variable and remove it from the DOM? Thanks for the help!

 

[BillyRayPreachersSon]

As a complete stab in the dark, perhaps it's the "onload" part not working for Firefox.

As you're using jQuery, why not use the pre-made "getScript" method instead of your "loadScript" one? It allows for a callback, so you should be fine there, and it'll cut your code down.

http://docs.jquery.com/Ajax/jQuery.getScript

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[userMikeD]

Thanks for the reply, Dan. Yeah, I looked into the jQuery getScript before putting this together, but I don't know how to "kill" the external script if it takes too long. I thought if I added the script element myself, I'd have more control over removing it after the time expired. Any other ideas? Thanks again for the help.

 

[BillyRayPreachersSon]

If you drag out the guts of the getScript function (basically a call to jQuery.ajax), then you can use the "timeout" option as documented here:

http://docs.jquery.com/Ajax/jQuery.ajax

jQuery.ajax({
	type: "GET",
	url: [!]'url goes here'[/!],
	data: null,
	success: [!]callback goes here[/!],
	dataType: "script",
	timeout: 2000	// Timeout in milliseconds
});

I've no idea what jQuery does if the request times out (never tried it), but I imagine it terminates or ignores it.

Hope this helps,
Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[userMikeD]

Thanks Dan. This works if I'm on the same domain, but what about when the script is coming from another source? I'm trying to prevent a third party script from hanging and making the page look like it's not done loading.

 

[BillyRayPreachersSon]

Apologies... I seem to have given you a bum steer, as the timeout option is not available when including remote scripts.

What happens if you use "delete gScript" instead of "gScript = null" in your "destroyScript" function?



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[userMikeD]

no worries, it was worth a shot. I appreciate the help. I added "delete gScript;" but firefox still continues to fetch the script and allows it to run. Any other ideas on how to stop a this script? Is it impossible in Firefox? Thanks again for the help!

 

[BillyRayPreachersSon]

You could potentially use AJAX with a timeout if you went via a server-side proxy to fetch the script. Is this an option for you?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

Hmm... having said that, a simpler way might be to stop your code from running explicitly as soon as the JS file is loaded, instead manually instigating the call only if 2 seconds (or however long) have not elapsed.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[userMikeD]

Thanks Dan. I think that's exactly what I'll do. If the remote code is wrapped in a function, then I will call the function on my side if it hasn't "timed out". I wish I had control to actually stop the request, but this should do the trick. Thanks again for the advice and thought. I really appreciate it!

Mike