Javascript Include

I want to include a JavaScript file and also call a function from it as soon as it loads. How do I do that.

I wrote something lie this. It works in IE but firefox kills me....
---------------------------------------------------------------------------------
window.onload=function(){
  if(!document.getElementById || !document.createElement){return;}
  var newjs=document.createElement('script');
  newjs.type='text/javascript';
  newjs.src='basic.js';
  document.getElementsByTagName('head')[0].appendChild(newjs);
  alertThis();
 }
---------------------------------------------------------------------------------

basic.js file
---------------------------------------------------------------------------------
function alertThis(){      
      alert("I have been called");
}

---------------------------------------------------------------------------------



LVL 6
Vivian AranhaMobile Solution ArchitectAsked:
Who is Participating?
 
Vivian AranhaMobile Solution ArchitectAuthor Commented:
that also did the same as what my code did.... But I did find the solution
<script >
      window.onload=function(){
   	var head= document.getElementsByTagName('head')[0];
   	var script= document.createElement('script');
   	script.type= 'text/javascript';   	
   	script.src= 'tuesday.js';
   	head.appendChild(script);\
	//FOR IE
	script.onreadystatechange= function () {
      	if (this.readyState == 'complete') alertThis();
   	}
	//FOR Firefox
	script.onload = function () {
		 alertThis();
   	}
   	
}
 
</script>

Open in new window

0
 
wktang83Commented:
In your html page,


<html>
<head>
<script type="text/javascript" href="basic.js"></script>
</head>
<body onload="alertThis()">
</body>
</html>

Open in new window

0
 
BadotzCommented:
Put this in the HEAD section of your page:

<script type="text/javascript src="basic.js"></script>

and change this:

window.onload=function(){
  alertThis();
 }

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
BadotzCommented:
Sorry, change to:

window.onload = alertThis;

0
 
wktang83Commented:
Sorry I made an error:
It should be:
<html>
<head>
<script type="text/javascript" src="basic.js"></script>
</head>
<body onload="alertThis()">
</body>
</html>

Open in new window

0
 
Vivian AranhaMobile Solution ArchitectAuthor Commented:
Ok I want to load that basic.js dynamically from another javascript. You can say i wnat conditional javacsript include.

window.onload=function(){
  if(!document.getElementById || !document.createElement){return;}
  var newjs=document.createElement('script');
  newjs.type='text/javascript';
<!-- if today is monday load monday.js -->  PSEUDO CODE
 newjs.src='monday.js';
<!-- if today is monday load tuesday.js -->  PSEUDO CODE
  newjs.src='tuesday.js'

  document.getElementsByTagName('head')[0].appendChild(newjs);
  alertThis();
 }

monday.js //// so for all the other js files

function alertThis(){
 alert("today is monday")
}
0
 
BadotzCommented:
Why bother? Put all of your .JS into a single file and load it.
0
 
Vivian AranhaMobile Solution ArchitectAuthor Commented:
This is just an example i m showing..... I have js files which are very huge adn i dotn wnatto load all of them.... i have a small server that i wrote.. A small web server.... which picks up javascripts and html's....

And trust me when i say small its really small... it cant handle huge files... so i have to suppply with small ones so i can keep them running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script >
window.onload=function(){
  if(!document.getElementById || !document.createElement){return;}
  var newjs=document.createElement('script');
  newjs.type='text/javascript';
  var d=new Date();
  if(d.getDay() == 0)
	newjs.src='sunday.js';
 if(d.getDay() == 1)
	newjs.src='monday.js';
	 if(d.getDay() == 2)
	newjs.src='tuesday.js';
	 if(d.getDay() == 3)
	newjs.src='wednesday.js';
	 if(d.getDay() == 4)
	newjs.src='thursday.js';
	 if(d.getDay() == 5)
	newjs.src='friday.js';
	 if(d.getDay() == 6)
	newjs.src='saturday.js';
  document.getElementsByTagName('head')[0].appendChild(newjs);
  	alertThis();
 }
 
</script>
</head>
<body>
<script>
</script>
</body>
</html>
 
 
<!-- DAY FILES  tuesday.js -->
 
function alertThis(){
	
	alert("Tuesday");
}

Open in new window

0
 
BadotzCommented:
Or you could try this:


function load_external_js_files() {
	// ----------------------------
	// Core .js files
	
	if (monday) { kluge('monday.js', false); }
	if (tuesday) { kluge('tuesday.js', false); }
	if (wednesday) { kluge('wednesday.js', false); }
	// etc.
}
// --------------------------------
 
function kluge(file_name, loaded) {
	// ----------------------------
	// File prefix and suffix
	
	var pfx = '<script type="text/javascript" src="' + URL;
	var sfx = '"><\/script>';
	// --------------------------------
	// Include the file(s)
	for (var i = 0; i < file_name.length; i++) {
		if (!loaded) { 
			document.write(pfx + file_name[i] + sfx);
		}
		else {
			var elem = document.createElement("script");
			elem.src = pfx + file_name[i] + sfx;
			document.body.appendChild(elem);
		}
	}
}

Open in new window

0
 
BadotzCommented:
My example works in IE, FF, Opera and Safari (at least it works here ;-), so I do not understand why you had problems...
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.