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?
 
nap0leonConnect With a Mentor Commented:
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
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.