• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

Add JavaScript file using a JavaScript function

Is there a way to dynamically add a JavaScript file to a webpage using a JavaScript function?

The method in this link looks promising, but doesn't seem to work: How do I include a Javascript file in a Javascript file?

My code is posted below.  What am I dong wrong?

Of course if I add this line to the HTML file, it will work.  But I am trying to learn a way to do this dynamically.
<script type="text/javascript" src="another.js"></script>

Open in new window

test.html
test.js
another.js
0
anAppBuilder
Asked:
anAppBuilder
  • 3
  • 3
1 Solution
 
GaryCommented:
Because by the time your code has run the js file is still loading - js doesn't wait for external events, it carries on running.
Simple solution is to add a call in the dynamic js to call the testExternalSource function and not in the parent page or add a callback in your function to run when it is loaded.
0
 
Sar1973Commented:
You should assign the script an id and launch getElementById("myScript").src="myFile.js"; I guess.
0
 
anAppBuilderAuthor Commented:
Thank you both.

Gary, can you explain what you mean by "add a call in the dynamic js to call the testExternalSource function and not in the parent page "?  

I understand the callback approach, but would prefer not to have all added code be running in callbacks.

Sar1973 I tried adding this line to test.html
<script id = "ext" type="text/javascript" src=""></script>

Open in new window

and changing function addJavaScript() to
document.getElementById("ext").src ="another.js";

Open in new window

but that does not work.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
GaryCommented:
In your master page you have
function testAnotherJs() {
	addJavaScript();
	testExternalSource();
}

Open in new window

Remove testExternalSource(); and put it in your dynamic js file
testExternalSource();
function getExternalString() {
	var extString = "A string from another.js";
	return extString;
}

Open in new window


The other way is to attach a callback to the script load
http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
It still means you cannot run your testAnotherJs function as it is
0
 
anAppBuilderAuthor Commented:
Thank you again, Gary.  I moved my testExternalSource function to the second .js and that does not solve the problem.

My code is attached.
test.html
test.js
another.js
0
 
GaryCommented:
test.html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>

</head>

<body onload="addJavaScript()">
	<p id="p4"> Test Paragraph FOUR.  Test of external JavaScript source.</p>
</body>
</html>

Open in new window

test.js
function addJavaScript() {
	 var head = document.getElementsByTagName('head')[0];
	 script = document.createElement('script');
	 script.src = "another.js";
	 script.type = 'text/javascript';
	 head.appendChild(script);
}

Open in new window

another.js
function getExternalString() {
	var extString = "A string from another.js";
	return extString;
}

function testExternalSource() {
	var extString = getExternalString();
	document.getElementById("p4").innerHTML += extString + "<br>";
}
testExternalSource()

Open in new window

0
 
anAppBuilderAuthor Commented:
Beautiful...Thank you!
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.

Join & Write a Comment

Featured Post

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.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now