document.write issue

[Sean]

Hi,

I have the following script:

-----------------------------------------------------------------------------------
<script type="text/javaScript">
<!--
document.write('<div id=hello1>Hello1</div>');
document.write('<div id=hello2 style="display:none;"><script
src="test.js"><\/script></div>');
//-->
</script>

where test.js contains one line: document.write("Hello2");
-----------------------------------------------------------------------------------

The intent is to only show the first div and hide the sencond div until late
to display if needed.
The result, however, shown both div contents.

If I change the script to:
-----------------------------------------------------------------------------------
<script type="text/javaScript">
<!--
document.write('<div id=hello1>Hello1</div>');
document.write('<div id=hello2
style="display:none>document.write("Hello2");(</div>');
//-->
</script>
-----------------------------------------------------------------------------------
It works fine.

If I further change it to:
-----------------------------------------------------------------------------------
<script type="text/javaScript">
<!--
document.write('<div id=hello1>Hello1</div>');
//-->
</script>

<script type="text/javaScript">document.write('<div id=hello2
style="display:none>');</script>
<script type="text/javaScript">document.write('<script
src="test.js"><\/script>');</script>
<script type="text/javaScript">document.write('</div>');</script>
-----------------------------------------------------------------------------------
it also works fine.

Any help is highly appreciated.

Sean

 

[kaeli]

Hi,

I have the following script:

Out of curiousity, why are you using the rather outdated document.write to
add new DOM elements?
Do you need to support old browsers?

You can add script elements and DIVs with DOM methods.

That said, I seem to recall a problem with document.write and writing the tag
"</script>"
I think you need to split it, like
document.write("</scr"+"ipt>");
Something about the parser interpreting it as a real </script>...?

--

 

[Craig Jurney]

Out of curiousity, why are you using the rather outdated document.write to
add new DOM elements?
Do you need to support old browsers?

You can add script elements and DIVs with DOM methods.

That said, I seem to recall a problem with document.write and writing the tag
"</script>"
I think you need to split it, like
document.write("</scr"+"ipt>");
Something about the parser interpreting it as a real </script>...?

Exactly so. Cf. David Flanagan's "JavaScript, the Definitive Guide"
12.2.1.2 [p.214, 3rd Ed.], [p.188, 4th Ed.]

"...[T]he HTML parser makes make no attempt to understand your
JavaScript code, and if it sees the string "</script>" in your code,
even if it appears within quotes, it assumes that it has found the
closing tag of the currently running script."

/Craig Jurney

 

[RobB]

kaeli wrote:
(snip)


Exactly so.

(snip)

Exactly not. This:

document.write('<div...><script src="test.js"><\/script></div>­');

....will prevent the closing tag from being parsed just as effectively
(and more compactly).

No idea what the issue is here but it seems like a pretty obscure one.

 

[Sean]

Thanks for the reply.

I have an escape for the script tag: <\/script> to avoid the problem you
mentioned but still have the wrong result.

Could you show an example of DOM method you mentioned?

Sean

 

[kaeli]

Thanks for the reply.

I have an escape for the script tag: <\/script> to avoid the problem you
mentioned but still have the wrong result.

Could you show an example of DOM method you mentioned?

Sure.
I already have one here. Removes / adds a script element as needed for some
validation routines.
http://www.ipwebdesign.net/kaelisSpace/useful_serverClientValidation.html

DIV is pretty similar, depending on what you want to do with it.

--
--
~kaeli~
Going to church doesn't make you a Christian any more than
standing in a garage makes you a car.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Randy Webb]

writing the tag



(snip)

Exactly not.

No, Exactly.

This:
document.write('<div...><script src="test.js"><\/script></div>­');

That is not the code that was posted. It is the solution to the problem
though.

 

[cwdjrxyz]

Anytime you use a document.write, it is a good idea to escape-backslash
all closing tags contained within the document.write. Such tags may
include <\/a>, <\/p>, <\/div> etc. Usually not backslashing causes no
trouble other than making the W3C validator grumble when it sees it.
However, in a few cases, such as the <\/script> being discussed in this
thread, you can have real problems that can be very difficult to find.
I have wasted enough time in the past running down hard-to-find errors
that were caused by the lack of backslash to make me always backslash
closing tags in document.write althogh you often can get away without
doing so. On the other hand, I have never had a problem that was caused
by backslashing closing tags in a document.write.

 

[cwdjrxyz]

Anytime you use a document.write, it is a good idea to escape-backslash
all closing tags contained within the document.write. Such tags may
include <\/a>, <\/p>, <\/div> etc. Usually not backslashing causes no
trouble other than making the W3C validator grumble when it sees it.
However, in a few cases, such as the <\/script> being discussed in this
thread, you can have real problems that can be very difficult to find.
I have wasted enough time in the past running down hard-to-find errors
that were caused by the lack of backslash to make me always backslash
closing tags in document.write althogh you often can get away without
doing so. On the other hand, I have never had a problem that was caused
by backslashing closing tags in a document.write.

 

[RobB]

No, Exactly.




That is not the code that was posted. It is the solution to the problem
though.

weekly

You're correct. This:

"is not the code that was posted..."

I did this thing...called "abbreviation".

*This* is the code posted originally (with closing script tags as
strings):

[1]

<script type="text/javaScript">
<!--
document.write('<div id=hello1>Hello1</div>');
document.write('<div id=hello2 style="display:none;"><script
src="test.js"><\/script></div>­');
//-->
</script>

[2]

<script type="text/javaScript">
<!--
document.write('<div id=hello1>Hello1</div>');
//-->
</script>


<script type="text/javaScript">documen­t.write('<div id=hello2
style="display:none>');</scrip­t>
<script type="text/javaScript">documen­t.write('<script
src="test.js"><\/script>');</s­cript>
<script type="text/javaScript">documen­t.write('</div>');</script>

As the OP noted:

I have an escape for the script tag: <\/script> to
avoid the problem you mentioned [..]

What are you talking about?

 

[cwdjrxyz]

Not backslashing closing tags in a document.write is an error, not just
an option, as you will find if you validate your page at the W3C. Thus
your closing division tags within a document.write all should be
backslashed. The following quote explains this.

"A common error (and the most common source of erroneous bug reports
for the WDG HTML Validator) occurs when writing HTML tags within a
SCRIPT element:

<script type="text/javascript">
<!--
// This is an error!
document.write("</P>");
// -->
</script>
As mentioned in the HTML 4 Recommendation's note about specifying
non-HTML data in element content, end tags are recognized within SCRIPT
elements, but other kinds of markup--such as start tags and
comments--are not. This is an unintuitive quirk of SGML for elements
defined to have CDATA content.

Authors should avoid using strings such as "</P>" in their embedded
scripts. In JavaScript, authors may use a backslash to prevent the
string from being parsed as markup:

<script type="text/javascript">
<!--
document.write("<\/P>");
// -->
</script>
Note that in XHTML, authors must also take care when using start tags
within a script element. For details, see the Script and Style elements
section of the XHTML 1.0 Recommendation as well as the HTML
compatibility guideline for embedded scripts."

Of course not backslashing the closing division tags may have had
nothing to do with your problem. However, I find it much easier to find
errors if I make the code valid first. I had a problem with not
backslashing closing division tags that were nested in a document.write
several years ago, and it took me hours to find the reason.

 

[Thomas 'PointedEars' Lahn]

[...] (e-mail address removed) enlightened us with...
That said, I seem to recall a problem with document.write and writing the
tag "</script>"
I think you need to split it, like
document.write("</scr"+"ipt>");
Something about the parser interpreting it as a real </script>...?

Exactly so. Cf. David Flanagan's "JavaScript, the Definitive Guide"
12.2.1.2 [p.214, 3rd Ed.], [p.188, 4th Ed.]

"...[T]he HTML parser makes make no attempt to understand your ^^^^^^^^^^^
JavaScript code, and if it sees the string "</script>" in your code,
even if it appears within quotes, it assumes that it has found the
closing tag of the currently running script."

However, Flanagan is wrong again. If we are talking about HTML parsers
(and not those tag soup parsers implemented in desktop Web browsers),
`"</scr" + "ipt>"' and the like won't help. With a (strict) HTML parser,
it is the ETAGO (End Tag Open) delimiter (`</') within the script that
causes the problem. The `script' element contains CDATA (character data),
and an SGML compliant parser, as a strict HTML parser would be, parsers
CDATA content up to the ETAGO delimiter. That is why the script engine is
passed incomplete and therefore syntactical incorrect code.

(e-mail address removed) pointed out the correct solution for source code of
ECMAScript compliant languages included in HTML documents. Yet the reason
why the W3C Markup Validator "grumbles" at the ETAGO delimiter is that an
SGML compliant markup parser is used for validation (see the Validator
FAQ).

BTW: This has been discussed ad nauseam before. Read the cljs FAQ.


PointedEars

 

[Thomas 'PointedEars' Lahn]

<script type="text/javascript">
<!--
document.write("<\/P>");
// -->
</script>
Note that in XHTML, authors must also take care when using start tags
within a script element.

And because of that, authors SHOULD NOT comment out script content the
way it was done above in XHTML, as an XML parser is allowed to remove such
content. In HTML, commenting out scripts that way is neither necessary
nor reasonable, as it is also error-prone.

For details, see the Script and Style elements
section of the XHTML 1.0 Recommendation as well as the HTML
compatibility guideline for embedded scripts."

The HTML Compatibility Guidelines of the XHTML 1.0 Specification
are flawed, for HTML and XHTML SHORTTAG features differ since they
are applications of different markup languages (SGML and XML).
E.g. `<... />' means a different thing in HTML and XHTML.


PointedEars