This chapter is from the book
This chapter is from the book
This chapter is from the book
Managing JavaScript in an XHTML Site
Perhaps the most frustrating thing about keeping the XHTML 1.0 documents on WebReview.com clean came about when the advertising code was delivered. The ad code is created by an outside source, and like so many professional companies, standards aren't an issue. The HTML they generate doesn't conform to any particular DTD, and they use a combination of Iframes and JavaScript to deliver the ads.
Listing 3.2 shows the markup the ad folk submitted to me.
Listing 3.2 Markup From an External Source
<IFRAME WIDTH=120 HEIGHT=60 MARGINWIDTH=0 MARGINHEIGHT=0HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no BORDERCOLOR=#000000
Taking a quick look at this markup, you can already tell that it doesn't conform to the more rigid rules derived from XML and found in XHTML (See Chapter 1). Furthermore, when you use recommended markup, such as XHTML 1.0 or HTML 4, it creates some concerns. In this case, the problems are two-fold. First, the introduction of any proprietary or ill-used tag or attribute causes the document to be invalid (although it will still likely operate). Second, the introduction of the inline JavaScript that hasn't been escaped also causes the page to be invalid.
When you use JavaScript with XHTML, it's ideal if you can put your JavaScript into a separate document. This only works with scripts that would normally be embedded, however. (Inline scripting is another story.)
In the case of inline scripts, you have to escape special characters in order for the document to validate. The peskiest of these characters is the ampersand (&), which is used frequently in JavaScript. So you'll need to escape it whenever possible.
To escape character entities in JavaScript by hand, follow these steps:
-
Open master_script.html, which says the following
<iframe width="120" height="60" marginwidth="0"
marginheight="0"
frameborder="0" scrolling="no"
src="http://newads.cmpnet.com/html.ng/site=webreview
&pagepos=topleftbutton">
<script type="text/javascript" language="JavaScript"
src="http://newads.cmpnet.com/js.ng/Params.richmedia=yes
&site=webreview
&pagepos=topleftbutton">
</script>
</iframe>: -
Open master_script_escaped.html, which contains the following:<iframe width="120" height="60" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"
src="http://newads.cmpnet.com/html.ng/site=webtechniques&
pagepos=topleftbutton">
<script type="text/javascript" language="JavaScript"
src="http://newads.cmpnet.com/js.ng/Params.richmedia=yes&
site=webtechniques&pagepos=topleftbutton">
</script>
</iframe> -
Manually escape the attributes or use HTML Tidy to escape the character entities.
HTML Tidy is a faster and happier method, so I use the Tidy plug-in to HTML-Kit from Chami. The figure shows the conversion of the master_script.html to an escaped version.
Figure 3.8 Convert the document by using the HTML Tidy plug-in in HTML-Kit from Chami.
NOTE
HTML Tidy is an excellent tool to test, repair, and convert files. Check it out at http://www.w3.org/. HTML-Kit can be found at http://www.chami.com/.
){kind=link}