Solved

Javascript Include

Posted on 2008-10-14
10
294 Views
Last Modified: 2013-12-07
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");
}

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



0
Comment
Question by:Vivian Aranha
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 3

Expert Comment

by:wktang83
ID: 22713357
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
 
LVL 29

Expert Comment

by:Badotz
ID: 22713370
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
 
LVL 29

Expert Comment

by:Badotz
ID: 22713378
Sorry, change to:

window.onload = alertThis;

0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 3

Expert Comment

by:wktang83
ID: 22713390
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
 
LVL 6

Author Comment

by:Vivian Aranha
ID: 22713405
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
 
LVL 29

Expert Comment

by:Badotz
ID: 22713431
Why bother? Put all of your .JS into a single file and load it.
0
 
LVL 6

Author Comment

by:Vivian Aranha
ID: 22713499
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
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 500 total points
ID: 22713525
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
 
LVL 6

Accepted Solution

by:
Vivian Aranha earned 0 total points
ID: 22713874
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
 
LVL 29

Expert Comment

by:Badotz
ID: 22713951
My example works in IE, FF, Opera and Safari (at least it works here ;-), so I do not understand why you had problems...
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Building a glossary into your website 9 58
Javascript: Range object 16 33
SEC_ERROR_REVOKED_CERTIFICATE In Firefox 5 68
PDF Turn Look 7 34
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question