JavaScript: How to detect external script load

The code below is supposed to detect the load of a 6MB external js file.

It works in FF/Chrome/Safari but not in IE.

http://www.rwsuk.com/addEventListener.html

FF/Chrome/Safari support the "addEventListener" method.

IE supports the "attachEvent" method - but the <script> tag doesn't seem to support the onload event.

Does anybody have a cross-browser way of detecting a dynamic .js file load in Internet Explorer?

Kind Regards,
<html>
<head>

<script type="text/javascript">

function fn(){
	document.getElementById('debug2').innerHTML = "The External File Has Loaded";
}

window.onload = function(){
	
	if (window.addEventListener)
	{
		document.getElementById("lib").addEventListener("load", fn, false);
	}
	
	else if (window.attachEvent)
	{
		document.getElementById("lib").attachEvent("onload", fn);
	}

	lib.src = "http://www.rwsuk.com/test.js";
	
	document.getElementById("debug1").innerHTML = "The Page Has Loaded";	
}
</script>

<script id="lib" type="text/javascript"></script>

</head>

<body>

<h3>Download a Big Image </h3>
<p><img src="http://sti.bmj.com/content/85/1/65/F1.large.jpg" width="360" height="226"></p>

<h3>Debug 1 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug1" ></div>

<h3>Debug 2 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug2" ></div>

</body>
</html>

Open in new window

AdrianSmithUKAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
Different approach...

If there is a unique global variable that is defined in the external js file, e.g, "rwsuk", you could check to see if rwsuk==undefined.  e.g., set a timer that runs every 1/10th of a second checking for it, then abort the timer once it is defined.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AdrianSmithUKAuthor Commented:
Hi Napoleon,

A good idea and if I can't find a listener type solution I'll use your's.

Kind Regards,

0
AdrianSmithUKAuthor Commented:
Hi Napoleon,

I used your idea and it works well. Below is the final solution.

Kind Regards,
Adrian Smith
<html>
<head>

<script type="text/javascript">

function fn(){
	document.getElementById('debug2').innerHTML = "The External File Has Loaded";
}

function poll(){
	
	if(typeof(test)=='undefined'){
		document.getElementById('debug3').innerHTML = "External File Loading";
	}
	
	else{
		document.getElementById('debug3').innerHTML = "External File Loaded";
	}
	
}


window.setInterval("poll()", 100);

window.onload = function(){
	
	if (window.addEventListener)
	{
		document.getElementById("lib").addEventListener("load", fn, false);
	}
	
	else if (window.attachEvent)
	{
		document.getElementById("lib").attachEvent("onload", fn);
	}

	lib.src = "http://www.rwsuk.com/test.js";
	
	document.getElementById("debug1").innerHTML = "The Page Has Loaded";

}

</script>

<script id="lib" type="text/javascript"></script>

</head>

<body>

<h3>Download a Big Image </h3>
<p><img src="http://sti.bmj.com/content/85/1/65/F1.large.jpg" width="360" height="226"></p>

<h3>Debug 1 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug1" ></div>

<h3>Debug 2 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug2" ></div>

<h3>Debug 3 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug3" ></div>

</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

AdrianSmithUKAuthor Commented:
Here is the test.js file.
//test.js

alert("Alert From External File");
var test = true;

/*
Cut and paste the text below until you have about 20,000 lines of text.

Nunc semper ligula vel diam volutpat rhoncus. Vivamus blandit vestibulum neque, id pellentesque metus euismod eu. Donec nec est augue, ac scelerisque velit. Nullam egestas erat nec turpis lobortis facilisis. Nam posuere suscipit commodo. Pellentesque non ligula at ligula congue interdum ac ut mauris. Cras non massa dui, sit amet blandit dolor. Praesent eu dolor lacus. Praesent tempor purus et odio lobortis posuere. Aliquam pellentesque erat quis ante posuere elementum. Nullam ut dui turpis. Donec at nibh velit, at porta sem.";
*/

Open in new window

0
AdrianSmithUKAuthor Commented:
Woops!

Forgot to clear the interval.


<html>
<head>

<script type="text/javascript">

function fn(){
	document.getElementById('debug2').innerHTML = "The External File Has Loaded";
}

function poll(){
	
	if(typeof(test)=='undefined'){
		document.getElementById('debug3').innerHTML = "External File Loading";
	}
	
	else{
		document.getElementById('debug3').innerHTML = "External File Loaded";
		window.clearInterval("poll()");
	}
}

window.setInterval("poll()", 100);

window.onload = function(){
	
	if (window.addEventListener)
	{
		document.getElementById("lib").addEventListener("load", fn, false);
	}
	
	else if (window.attachEvent)
	{
		document.getElementById("lib").attachEvent("onload", fn);
	}

	lib.src = "http://www.rwsuk.com/test.js";
	
	document.getElementById("debug1").innerHTML = "The Page Has Loaded";

}

</script>

<script id="lib" type="text/javascript"></script>

</head>

<body>

<h3>Download a Big Image </h3>
<p><img src="http://sti.bmj.com/content/85/1/65/F1.large.jpg" width="360" height="226"></p>

<h3>Debug 1 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug1" ></div>

<h3>Debug 2 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug2" ></div>

<h3>Debug 3 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug3" ></div>

</body>
</html>

Open in new window

0
AdrianSmithUKAuthor Commented:
Sorry.

The solution above didn't clear the interval.

This one does.
<html>
<head>

<script type="text/javascript">

function fn(){
	document.getElementById('debug2').innerHTML = "The External File Has Loaded";
}

function poll(){
	
	var lwf_start_timer = new Date().getTime();
	
	if(typeof(test)=='undefined'){
		document.getElementById('debug3').innerHTML = "External File Loading " + lwf_start_timer;
	}
	
	else{
		document.getElementById('debug3').innerHTML = "External File Loaded " + lwf_start_timer;
		window.clearInterval(p);
	}
}

var p = window.setInterval("poll()", 100);

window.onload = function(){
	
	if (window.addEventListener)
	{
		document.getElementById("lib").addEventListener("load", fn, false);
	}
	
	else if (window.attachEvent)
	{
		document.getElementById("lib").attachEvent("onload", fn);
	}

	lib.src = "http://www.rwsuk.com/test.js";
	
	document.getElementById("debug1").innerHTML = "The Page Has Loaded";

}

</script>

<script id="lib" type="text/javascript"></script>

</head>

<body>

<h3>Download a Big Image </h3>
<p><img src="http://sti.bmj.com/content/85/1/65/F1.large.jpg" width="360" height="226"></p>

<h3>Debug 1 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug1" ></div>

<h3>Debug 2 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug2" ></div>

<h3>Debug 3 </h3>
<div style="border:1px solid #08c; margin:10px 0; padding:10px;" id="debug3" ></div>

</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.