How to embed script code in other javascript file?

Question

0.00/5 (No votes)

See more:

Hi guys, I have an embed script code contain a soundtrack for my web. But I want to move this script to a .js file. Here's my embed script :

HTML

<script type="text/javascript" src="http://scmplayer.net/script.js" 
	data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top',
	'showplaylist':false,'playlist':[{'title':'Soundtrack',
	'url':'https://soundcloud.com/nlpazali/command-and-conquer-red-alert-3-soundtrack-ra3-theme-soviet-march-www-open-az'}]}" ></script>

Then I tried move that script to my .js file :

JavaScript

script.type = 'text/javascript';
	script.src = 'http://scmplayer.net/script.js';
	script.data-config = '{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top',
						 'showplaylist':false,'playlist':[{'title':'Soundtrack',
						 'url':'https://soundcloud.com/nlpazali/command-and-conquer-red-alert-3-soundtrack-ra3-theme-soviet-march-www-open-az'}]}';

But the problem, my soundtrack can played with this method. Anyone, can you help to move script file to other .js file? Thanks.

Posted 24-Jan-15 1:10am

Ananta Pratama

Add a Solution

2 solutions

Solution 1

Javascript language don't have anything like "include". All includes are done in the HTML <script> tags, in the required order of execution.

At the same time, you can write Javascript code which loads another Javascript from the file and use it. These approaches are reviewed here: http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file[^].

But I don't see a reason for doing it. It would be simpler and safer to have two <script> HTML elements in a row; the first script will be executed first, and then the second one.

—SA

Posted 24-Jan-15 6:44am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

UWStudents · Accepted Answer · 2015-01-25T03:13:00

JavaScript has no import, include, or require. There are other ways for JavaScript to include external JavaScript contents, though.

Ajax Loading

Load an additional script with an Ajax call and then use eval. This is the most straightforward way, but it is limited to your domain because of the JavaScript sandbox security model. Using eval also opens the door to bugs and hacks.

jQuery Loading

The jQuery library provides loading functionality in one line:

$.getScript("my_lovely_script.js", function(){

alert("Script loaded and executed.");

// Use anything defined in the loaded script...
});
Dynamic Script Loading

Add a script tag with the script URL in the HTML. To avoid the overhead of jQuery, this is an ideal solution.

The script can even reside on a different server. Furthermore, the browser evaluates the code. The <script /> tag can be injected into either the web page <head>, or inserted just before the closing </body> tag.

Both of these solutions are discussed and illustrated in JavaScript Madness: Dynamic Script Loading.

Now, there is a big issue you must know about. Doing that implies that you remotely load the code. Modern web browsers will load the file and keep executing your current script because they load everything asynchronously to improve performance.

It means that if you use these tricks directly, you won't be able to use your newly loaded code the next line after you asked it to be loaded, because it will be still loading.

For example: my_lovely_script.js contains MySuperObject:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined
Then you reload the page hitting F5. And it works! Confusing...

So what to do about it ?

Well, you can use the hack the author suggests in the link I gave you. In summary, for people in a hurry, he uses en event to run a callback function when the script is loaded. So you can put all the code using the remote library in the callback function. For example:

function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;

// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;

// Fire the loading
head.appendChild(script);
}
Then you write the code you want to use AFTER the script is loaded in a lambda function:

var myPrettyCode = function() {

// Here, do what ever you want
};
Then you run all that:

loadScript("my_lovely_script.js", myPrettyCode);
Source Code Merge

Another solution is to combine the two files into a single file. This can be used with minification to produce a single, minimally sized JavaScript file to include as normal.