External js files, document.write, and (apparent) deferred evaluation

J

john.lum

I am using document.write in an external javascript file to display
some content, but I've found that I can't rely on that content being
displayed in the location I expect.

Here's a very simple example:

=====================================================
<!-- test1.htm -->
<html>
<body>
<script language="javascript">
document.write('<script language="javascript"
src="test1.js"><\/script>');
document.write('<p>LINE 2: Should appear below LINE 1, but does
not...</p>');
</script>
</body>
</html>
=====================================================
// test1.js
document.write('<p>LINE 1: Should appear above LINE 2, but does
not...</p>');
=====================================================

What happens here is that LINE 2 is displayed above LINE 1 when the
document is loaded by my browser. I vaguely understand why the
javascript parser might do this, but in the end, I want LINE 1 to show
up before LINE 2, and I'm wondering how to achieve it.

I am aware that I can force the order I want in this particular example
by adding a </script><script> line after the first document.write line.
However, in my real code, I've got primary external js file (say,
test2.js) from which I am bringing in the test1.js content; I'm not
doing it from an HTML file. In this situation, I'm not sure what
syntactical trick I can play to cause the test1.js content to be
rendered at the desired location.

Does anyone have any thoughts about how I might resolve this?

Thanks much,
John
 
M

Martin Honnen

What happens here is that LINE 2 is displayed above LINE 1 when the
document is loaded by my browser.

Which browser exactly is that? And do you only care about that
particular browser or are you looking for consistency across browsers?
 
J

john.lum

Which browser exactly is that?

Good question, sorry I didn't specify. I observe this behavior in
Netscape 7.02 and IE 6.0 (XP SP2). Those are the browsers that I
really care about.

The underlying situation here is that I've written a UI component that
I want to bring in via javascript from a variety of page types
(straight HTML, PHP, and perl template toolkit templates). There's
already a defined external header.js file that is brought in by most of
these pages, so I figured it was a good idea to use document.write
there to bring in the code associated with my new component.

Now I'm wary, since I encountered these display issues...any advice is
much appreciated.

Thanks,
John
 
C

christopher.secord

I think that the problem is related to what this means:

document.write('<script language="javascript"
src="test1.js"><\/script>');

There are two possible interpretations, and which one a browser uses
probably depends on what some programmer arbitrarily decided to
implement. I doubt that there is rfc that specifies the way this
should work (though I could be wrong).

Interpretation 1 is kind of like depth-first tree traversal, and this
is what you expected to happen. The browser executes the first
document.write, and then evaluates what's written. In this case, what
you've written was more javascript, so the browser then executes that.
That javascript writes out LINE 1. Then the browser pops up out of the
tree and continues what it was doing, and writes out LINE 2.

Interpretation 2 is kind of like a breadth-first traversal. The
browser executes the first document.write, but doesn't pay any
attention to what it wrote out. It continues on to the second write
and outputs LINE 2. Then after it's done at that level (doing the
breadth of the tree), it probably passes the result to the renderer and
the renderer notices that, "hey there's more javascript here!" and
proceeds to process the second level of the tree, writing out LINE 1.

If my analysis is correct, then you can't do anything about this.

I wonder why you're using javascript to write javascript, but I'm sure
you had a good reason. If you could possibly stop doing that, I think
you'll get around this problem.
 
J

john.lum

I wonder why you're using javascript to write javascript

Well, it's definitely one way to achieve modularity, but apparently not
a very effective way. :)

I think that Plan B is going to involve using PHP as the language for
my external JS files. That way, I can "include" whatever additional
javascript I want without worrying about the vagaries of the browser's
javascript interpreter.

Thanks for the feedback,
John
 
R

RobG

I am using document.write in an external javascript file to display
some content, but I've found that I can't rely on that content being
displayed in the location I expect.

Here's a very simple example:

=====================================================
<!-- test1.htm -->
<html>
<body>
<script language="javascript">
document.write('<script language="javascript"
src="test1.js"><\/script>');
document.write('<p>LINE 2: Should appear below LINE 1, but does
not...</p>');
</script>
</body>
</html>
=====================================================
// test1.js
document.write('<p>LINE 1: Should appear above LINE 2, but does
not...</p>');
=====================================================

What happens here is that LINE 2 is displayed above LINE 1 when the
document is loaded by my browser. I vaguely understand why the
javascript parser might do this, but in the end, I want LINE 1 to show
up before LINE 2, and I'm wondering how to achieve it.

I am aware that I can force the order I want in this particular example
by adding a </script><script> line after the first document.write line.
However, in my real code, I've got primary external js file (say,
test2.js) from which I am bringing in the test1.js content; I'm not
doing it from an HTML file. In this situation, I'm not sure what
syntactical trick I can play to cause the test1.js content to be
rendered at the desired location.

Does anyone have any thoughts about how I might resolve this?

Script elements can't be nested, so the browser has to move the nested
element to after the 'enclosing' element.

I suppose error correction goes something like: having encountered an
opening tag for a script element, the browser decides to write the
second element after the first element's closing tag. So the nested
script will be moved to after the first script always.

I would expect that to be pretty consistent in all browsers.
 
T

Thomas 'PointedEars' Lahn

(e-mail address removed) wrote:

Please provide attribution of quoted material.[1]
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Well, it's definitely one way to achieve modularity, but apparently not
a very effective way. :)
Indeed.

I think that Plan B is going to involve using PHP as the language for
my external JS files. That way, I can "include" whatever additional
javascript I want without worrying about the vagaries of the browser's
javascript interpreter.

Since you "include" the script without condition, there is no reason why
you could not write it as it is. You do not need server-side PHP for that.

| <script language="javascript">

(Did someone already mention that the `language' attribute is deprecated,
and the type attribute is required for Valid HTML 4/XHTML 1?)

|   document.write('<script language="javascript"
| src="test1.js"><\/script>');
| document.write('<p>LINE 2: Should appear below LINE 1, but does
| not...</p>');
| </script>

<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
document.write('<p>LINE 2: Does appear below LINE 1<\/p>');
</script>

As simple as that :)

Note that you have to escape ETAGO delimiters (`</') _always_ within
the _HTML_ `script' element, or other elements with CDATA-type content,
not only for `</script>'.


HTH

PointedEars
___________
[1] <URL:http://safalra.com/special/googlegroupsreply/>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top