Solved

Javascript Include

Posted on 2008-10-14
10
295 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free 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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
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)
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

691 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