import/include a .js file into a .js file

[Henri]

Hi,

Is there a way to include a .js file inside a .js file in JavaScript 1.5?

Thanx

Henri

 

[kaeli]

Hi,

Is there a way to include a .js file inside a .js file in JavaScript 1.5?

Not that I know of. If you figure one out, I'd love to see it. I'm tired of
having to copy/paste library functions, too.

--

 

[Randy Webb]

Not that I know of. If you figure one out, I'd love to see it. I'm tired of
having to copy/paste library functions, too.

In the included file either document.write the script tag to include the
second file, or, createElement and load it.

Of course, with server side coding, it becomes trivial to add an include
statement to include the external file.

 

[kaeli]

In the included file either document.write the script tag to include the
second file, or, createElement and load it.

Of course, with server side coding, it becomes trivial to add an include
statement to include the external file.

I don't think that would work for what I want it for.

I have a library file called jsValidation.js with generic functions for
things like testing for blank fields, format of phone number, and so on.

I also have one called jsEvents.js with a way to add events in a cross-
browser fashion. It has a function called addEvent.

Now, say I want to make a third js file and I want to call functions isBlank
from the validation file and addEvent from the event file.

I don't think I can do that. Do you know a way?

--

 

[Rob B]

Unless I'm misunderstanding this, you're barking up the wrong tree here.
You don't call js functions from files, you load the files into RAM (the
js memory space) and then simply simply call any functions needed; if in
scope, they'll run. The only difference between embedded (hardcoded) js
and 'external' js is that one is - erm - embedded in the main document
and read into memory from there, and the other is stored in a separate
file and loaded from there. No other distinctions: 'external' js doesn't
sort of "hover out there" as many seem to thing, waiting to be "called".
It's either loaded or it's not, available or not.

There are apis with member functions specifically designed to 'import'
needed external files (using document.write to print script tags) but
they're highly proprietary.

 

[Rob B]

kaeli...

btw love your sig..Totally 60s.

 

[kaeli]

Unless I'm misunderstanding this, you're barking up the wrong tree here.

Not quite. But I did make a bit of a logic error. I'm too used to compiled
code.
I want to ensure both files are loaded into memory when only one is
specifically included in the client html file with <script src=> type tag.

Since I only use script in my intranet apps, and we only support DOM
browsers, I see now that I can simply add the other files like so:

/* jsHandler.js */
function inc(filename)
{
var body = document.getElementsByTagName('body').item(0);
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
body.appendChild(script)
}

inc("jsValidation.js");
inc("jsEvents.js");

/* several more functions that call functions in the above two files */
function blah (foo)
{
if (isBlank(foo)) return false;
}

/* end */

Then in my JSP, I can just do
<script type="text/javascript" src="jsHandler.js"></script>
and it will get both the other files as well.

I suspect there would be problems with scripts that try to run prior to page
load (such as image preloaders), but none of mine do that. My stuff is pretty
much all form validation and dynamically adding event handlers to JSP-
generated form elements.

Thanks for the tips.

--
--
~kaeli~
Profanity: the single language in which all programmers are
expert.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Henri]

This is the best solution I've found so far:

At the beginning of each .js file importing another file:
(this file defines a class called 'myclass' and 'km_' is just the prefix I
use for my functions or classes)

----------------------------------------------------------------
// myclass.js

if (typeof(km_scripts) == 'undefined') var km_scripts = new Object();
km_myclass_import('importedfile.js');

function km_myclass_import(jsFile) {
if (km_scripts[jsFile] != null) return;
var scriptElt = document.createElement('script');
scriptElt.type = 'text/javascript';
scriptElt.src = jsFile;
document.getElementsByTagName('head')[0].appendChild(scriptElt);
km_scripts[jsFile] = jsFile; // or whatever value your prefer
}

function km_myclass_alert() {
alert(importedValue);
}

-------------------------------------------------------------
The imported file importedfile.js:

// importedfile.js

var importedValue = 'The file was imported';

----------------------------------------------------------------
The HTML file to test it :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript" src="myclass.js" />
<TITLE></TITLE>
</HEAD>
<BODY>
<input type="button" value="Test!" onclick="km_myclass_alert()" />
</BODY>
</HTML>


Thanx for your helps
Henri

 

[Randy Webb]

I don't think that would work for what I want it for.

I have a library file called jsValidation.js with generic functions for
things like testing for blank fields, format of phone number, and so on.

I also have one called jsEvents.js with a way to add events in a cross-
browser fashion. It has a function called addEvent.

Now, say I want to make a third js file and I want to call functions isBlank
from the validation file and addEvent from the event file.

I don't think I can do that. Do you know a way?

<script src="myCustomJSFile.php" type="text/javascript"></script>

And in myCustomJSFile.php:

include 'jsValidation.js';
include 'jsEvents.js';
include 'thirdJSFile.js';

//rest of unique to the page JS code here


When the browser gets it, all in one file, are all the functions/code
you want.