Conditionally calling a .js file [Archive]

PDA

View Full Version : Conditionally calling a .js file

peterinwa

03-14-2003, 10:53 AM

Please see my revised post, below.

Vladdy

03-14-2003, 11:17 AM

This one answers your question and more.... http://www.codingforums.com/showthread.php?s=&threadid=16205

peterinwa

03-14-2003, 11:36 PM

I made three versions of a simple test page to demonstrate the problem.

1. This one works and creates a page containing the words "Test Page". It's very simple and doesn't insert a .js file. Baby steps.


<html> <head>
<script language="JavaScript">
c="<body><center>";
x="Test Page";
c+=x;
c+="</center></body></html>";
document.write(c);
</script>

2. This one is identical except for one line. It sets the variable x with an inserted .js file. It works fine, too.


<html> <head>
<script language="JavaScript">
c="<body><center>";
</script><script src="JSfile.js"></script><script language="JavaScript">
c+=x;
c+="</center></body></html>";
document.write(c);
</script>

3. This last one uses the coding I was given to conditionally insert one .js file or the other, "on the fly" so to speak. It fails and gives the error message "x is undefined".

When it runs I get the alert message "in loadScript function", so I know the loadScript function is being called.


<html> <head>
<script language="JavaScript">

// Function to load test .js file
function loadScript(file){
alert("in loadScript function");
script=document.createElement('script');
script.src=file;
document.getElementsByTagName('head')[0].appendChild(script)}

// Select .js file - This would normally be conditional.
loadScript("JSfile.js");

c="<body><center>";
c+=x;
c+="</center></body></html>";
document.write(c);
</script>

And the .js file is:

// JSfile.js
x="Test Page";

I've been working on this on and off for two years!

liorean

03-15-2003, 08:18 PM

Oh, what you have there is just a number of logic errors that might be hard to catch if you haven't played with the DOM that much. Here's the deal:

1. DOM objects don't exists before they are parsed by the XML/HTML parser.

This means you can't use the DOM properties on the document object until the document is fully parsed.

2. document.write, .writeln are only effective on document objects that are either still being constructed, or have been opened for stream writing by the document.open method.

So, this means you can't use document.write, .writeln after the document is parsed.

3. Creating a script element doesn't mean you wait till the script is loaded and has been run before continuing - you continue to run the current script to it's end, then you start the loaded script.

See the problems in that?

So, what's the answer to this?

Old-style: Use document.write in the head to write the script elements.
New-style:Use the DOM to load the script, use .innerHTML to write to the document.
W3C-Style: As above, but use DOM methods to build the element instead of .innerHTML.

peterinwa

03-15-2003, 08:40 PM

I very much appreciate the reply though I basically don't have a clue what you are talking about. I have done a lot of JS coding that works (not saying that it's good coding) but I basically know the little I know and beyond that get confused.

I'm not expecting a tutorial, but could you please say what DOM stands for? That might help. If they (my script code) doesn't exist, I don't know why I'm getting the alert message.

I assume parse means the assembling of the code for the page.

Lastly -- this sounds too simple -- it almost sounds like I only need to insert a document.write in the header of my 3. code above. What would the syntax for that be?

liorean

03-16-2003, 02:19 PM

q: What is the DOM?
a: The DOM (Document Object Model) is a W3C standard which provides an interface for programming languages to create, read, write and modify documents. It's generally made for XML or other single inheritance, singular root hierarchical languages. The DOM provides functions and properties to describe and work with a document, such as document.getElementById, document.createElement and many others.

q: Why do I get the alert message if the code doesn't work?
a: Well, this has to do with what's done when and why. You see, generally most DOM functionality isn't provided until the document is fully loaded. Your script loader tries to use DOM methods before the page is fully loaded. That's the logic error I was talking about. You see, the script loader probably works perfectly, but it's called at the wrong time. It should be called through window.onload. Your document.write, on the other hand, only works while the document is loading, not after it's been loaded. That means you have to either drop the document.write or the script loader in favor of something functionally equivalent that runs in the same time span (either while loading or after the page has been loaded).

q: What do I mean by parse, load etc?
a: Well, this is different in different contexts. For HTML, an element is parsed when it's been added to the document structure. A page is loaded when all elements in it are parsed. For JavaScript, there's a different meaning of parsed and loaded, though. Loaded in that case means the JavaScript is downloaded and added to the document structure, while parsed means the script has been evaluated (iow the script has been run). Not all DOM enabled browsers parse scripts after loading them through the DOM mechanism you're using; examples of browsers that doesn't are IE Mac, Safari/Konqueror. An example of a DOM enabled browser that doesn't even load the script is Opera 7. NN 4, Opera<7, IE4 and most minor browsers doesn't support the DOM at all.