Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Add JavaScript file using a JavaScript function

Posted on 2014-03-07
7
Medium Priority
?
299 Views
Last Modified: 2014-03-11
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
Comment
Question by:anAppBuilder
[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
  • 3
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39913822
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39914612
You should assign the script an id and launch getElementById("myScript").src="myFile.js"; I guess.
0
 

Author Comment

by:anAppBuilder
ID: 39916542
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Expert Comment

by:Gary
ID: 39916554
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
 

Author Comment

by:anAppBuilder
ID: 39922353
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39922363
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
 

Author Closing Comment

by:anAppBuilder
ID: 39922408
Beautiful...Thank you!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

670 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