javascript include

The Little Guy · January 26, 2011

I have 2 classes:

A.js

B.js

a = new A();

in class A I use class B, how can I load class B within class A, without manually typing it into the browser? I want to do this:

Then when class B is used inside class A it automatically uses it..

Kinda like include in PHP, how can I do it with JS?

.josh · January 26, 2011

is there a reason you can't include them both?

<script type="text/javascript" src="B.js"></script>
<script type="text/javascript" src="A.js"></script>

But anyways, if you want to "include" a javascript file within another javascript file you can do this:

document.write(unescape('%3Cscript src="B.js" type="text/javascript"%3E%3C/script%3E'));

or this:

var obj = document.createElement("SCRIPT");
obj.type = "text/javascript";
obj.src = "B.js";
document.body.appendChild(obj);

KevinM1 · January 26, 2011

The document.write() version is dangerous, as any document.write() invoked after the page is finished loading will create a new document in place of the loaded page, thereby nuking what you had.

The Little Guy · January 26, 2011

I have this code, not sure why it doesn't work, visually it looks correct.

function JSLive(){
this.jsroot = document.getElementById('JSLive').src;
this.jsroot = this.jsroot.substr(0, this.jsroot.lastIndexOf('/'));
this.include('JEffect.js');
this.effect = new JEffect();  // <-- Not defined
}
JSLive.prototype.include = function(file){
var itm = document.createElement('script');
itm.setAttribute('type', 'text/javascript');
itm.setAttribute('src', this.jsroot+'/'+file);
var head = document.getElementsByTagName('head')[0];
head.insertBefore(itm, head.firstChild);
}

I am getting an error saying:

Uncaught ReferenceError: JEffect is not defined

I build a script tag and place it in the head (first element). then I create the new item. Why doesn't it see the file I just added? If I click on the link in the source in Chrome, it takes me to the file...

the first script tag is created after the second script tag.

<html><head><script type="text/javascript" src="http://localhost:3333/JSLive/JEffect.js"></script>
	<title>JEffect Transitions</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script id="JSLive" type="text/javascript" src="JSLive.js"></script>
	<script type="text/javascript">
		var live = new JSLive();
	</script>
</head>
<body>
	<div id="box" style="height: 100px; width: 100px; background-color: #000000"></div>
	<script type="text/javascript">
		live.effect.transition('box', 'x', 'x', 100, 2);
		live.effect.alertErrors();
	</script>

</body></html>

.josh · January 27, 2011

The document.write() version is dangerous, as any document.write() invoked after the page is finished loading will create a new document in place of the loaded page, thereby nuking what you had.

well that doesn't seem to be what he's doing here...

.josh · January 27, 2011

@TLG: Most likely the problem is that this line:

this.effect = new JEffect(); // <-- Not defined

is being executed before this line

this.include('JEffect.js');

has a chance to finish loading. You probably want to wrap the line where you try to create the new object in a setTimeout or an onready or onload of some kind.

haku · January 27, 2011

This is how I include files in javascript:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "/path/to/script.js";
document.getElementsByTagName("head")[0].appendChild(script);

Works a charm.

The Little Guy · January 27, 2011

This is how I include files in javascript:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "/path/to/script.js";
document.getElementsByTagName("head")[0].appendChild(script);

Works a charm.

but then do you use something from it as soon after you add it?

KevinM1 · January 27, 2011

The document.write() version is dangerous, as any document.write() invoked after the page is finished loading will create a new document in place of the loaded page, thereby nuking what you had.

well that doesn't seem to be what he's doing here...

True, but I figured the caveat should still be mentioned. It's one of those gotchas that often gets people asking "It worked there, why doesn't it work here?"

The Little Guy · January 27, 2011

Any suggestions on this:

function JSLive(){
this.jsroot = document.getElementById('JSLive').src;
this.jsroot = this.jsroot.substr(0, this.jsroot.lastIndexOf('/'));
this.include('JEffect.js', 'JEffect');
}

JSLive.prototype.include = function(file, call){
    var itm = document.createElement('script');
    itm.setAttribute('type', 'text/javascript');
    itm.setAttribute('src', this.jsroot+'/'+file);
    var head = document.getElementsByTagName('head')[0];
    if(call != undefined){
        itm.onreadystatechange = function() {
            if(this.readyState == 'complete'){
                 eval('this.effect = new '+call+'();');
            }
        }
        eval('itm.onload = '+call);
    }
    head.insertBefore(itm, head.firstChild);
}

The Little Guy · January 28, 2011

This works:

JSLive.prototype.include = function(file, call){
var itm = document.createElement('script');
if(call != undefined){
	if(itm.readyState){
		itm.onreadystatechange = function() {
			if(itm.readyState == 'loaded'){
				 eval(call);
			}
		}
	}else{
		itm.onload = function(){
			eval(call);
		}
	}
}
itm.setAttribute('type', 'text/javascript');
itm.setAttribute('src', file);
var head = document.getElementsByTagName('head')[0];
head.insertBefore(itm, head.firstChild);
}

live.include('/JSLive/test.js', 'alertBox("hi")');

test.js:

function alertBox(p){
alert(p);
}

The problem I have with it is that it is using eval. Any suggestions?

haku · January 28, 2011

This is how I include files in javascript:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "/path/to/script.js";
document.getElementsByTagName("head")[0].appendChild(script);
Works a charm.
but then do you use something from it as soon after you add it?

What do you mean? The code is usable once it is added (try it - include a file with an alert() call in it and you will see it called right away). This method is nice as it loads javascript files asynchronously, which can improve page loading performance.

The Little Guy · January 28, 2011

You have this function (file2.js):

function msgBox(msg){
     alert(msg);
}

you run this javascript:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file2.js";
document.getElementsByTagName("head")[0].appendChild(script);
msgBox('This is a message');

You will get an error saying that "msgBox" is undefined, because javascript will have tried to run msgBox before file2.js have even been requested or loaded.

haku · January 28, 2011

I see what you are saying. You are correct, the file is included asynchronously, so any code that relies on it to be loaded won't work at the time of execution. Generally when I do this I do it with self-contained scripts, that maybe depend on something outside of the script, rather than having something outside the script rely on the included script.

The advantage to including with this method is that the files are loaded asynchronously, which can increase page loading times.

.josh · January 28, 2011

...and this is the advantage of using document.write(). Using document.write() is NOT asynchronous. Browser will wait until the document.write() is finished executing, which includes waiting for the script tag to finish loading. Of course, if for whatever reason it doesn't load, you're fucked.

With the appendChild method, yes, it is done asynchronously. Which is why I usually make use of setTimeout when going that route. Usually just timing it out by 250-500ms works just fine (kinda depends on how big your include script is and what all its doing...). However, another trick I do sometimes is to setup a recursive function call to keep checking for it and only execute when you get the green light. This is basically the same principle as the ready state change, though ready states can be somewhat tricky and not 100% guaranteed across all browsers. Basically it goes like this:

B.js

var x = true;

A.js

var obj = document.createElement("SCRIPT");
obj.type = "text/javascript";
obj.src = "B.js";
document.body.appendChild(obj);

function creatNewEffect() {
  if (typeof(x) == 'undefined') {
    setTimeout('createNewEffect()',100);
  } else {
    this.effect = new JEffect();
  }
}
createNewEffect();

That's just an example to show principle, I have no idea what the scope of this.effect is in your context, you will have to work that out.

Sign In

javascript include

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information