Dynamic HTML: The Definitive Reference, 2rd Ed.

Chapter 5. Making Content Dynamic

In addition to letting you script the positions of elements, as described in Chapter 4, Dynamic HTML allows you to write scripts that modify content and adjust styles on the fly. Prior to the Version 4 browsers, your ability to script dynamic content was limited to controlling the HTML being written to the current page as the page initially loaded, loading HTML documents into other frames, and, in some browser versions, swapping same-size images. But when browsers such as IE 4 (and later) and Netscape 6 expose every HTML element to a scriptable object model and automatically reflow pages, authors gain extraordinary powers to change anything on the page at any time.

The history of dynamic content browsers was tarnished by what became a dead-end and underfeatured approach to dynamic content: the Netscape Navigator 4 layer. While covered in depth in the first edition of this book, Navigator 4's unique DHTML concepts, language, and limitations no longer haunt browsers in current release. Therefore, as the installed base of Navigator 4 continues to dwindle, this edition addresses dynamic content techniques that are either broadly backward compatible or, more importantly, rely on the IE and W3C Level 2 Document Object Models (DOMs) implemented in modern browsers.

This chapter provides an overview of the most common ways of dynamically changing content, including some that date back to Navigator 2. It also offers some suggestions about how to develop code that accommodates the incompatibilities that exist between the IE-only and W3C DOMs. Compared to the contortions necessary in the IE 4 versus Navigator 4 days, most cross-browser dynamic content tasks today are a breeze.

5.1. Writing Variable Content

While a page is loading, you can use the JavaScript document.write( ) method to fill in content that cannot be stored as part of the document. Example 5-1 demonstrates a simple combination of hardwired HTML with dynamically written content to fill a page. In this case, the dynamically written content consists of properties that the client computer and browser can determine without burdening the server. The user is oblivious to the fact that a script creates some of the text on the page.

Example 5-1. Combining fixed and dynamic content in a rendered page

<html>
<body>
<h1>Welcome!</h1>
<hr>
<p>Your browser identifies itself to the server as:<br> 
<script language="JavaScript" type="text/javascript">
document.write(" navigator.userAgent + ".");
</script>
</p>
</body>
</html>

You can use document.write( ) or document.writeln( ) in scripts that execute while a document is loading, but you cannot use either method to modify only a portion of a page that has already loaded. Once a document has finished loading, if you make a single call to document.write( ) directed at the current document, the call automatically clears the current document from the browser window and writes the new content to the page. So, if you want to rewrite the contents of a page, you must do so with just one call to the document.write( ) method. Example 5-2 demonstrates how to accumulate content for a page in a variable that is written in one blast.

Example 5-2. Creating a new document for the current window

<html>
<head>
<title>Welcome Page</title>
<script language="JavaScript" type="text/javascript">
// create custom page and replace current document with it
function rewritePage(form) {
    // accumulate HTML content for new page
    var newPage = "<html>\n<head>\n<title>Page for ";
    newPage += form.entry.value;
    newPage += "</title>\n</head>\n<body bgcolor='cornflowerblue'>\n";
    newPage += "<h1>Hello, " + form.entry.value + "!</h1>\n";
    newPage += "</body>\n</html>";
    // write it in one blast
    document.write(newPage);
    // close writing stream
    document.close( );
}
</script>
<body>
<h1>Welcome!</h1>
<hr>
<form onsubmit="return false;">
<p>Enter your name here: <input type="text" name="entry" id="entry"></P>
<input type="button" value="New Custom Page" onclick="rewritePage(this.form);">
</form>
</body>
</html>

Notice that the script inserts data from the original screen's form into the content of the new page, including a new title that appears in the browser window's title bar. As a convenience to anyone looking at the source of the new document, escaped newline characters (\n) are inserted for cosmetic purposes only. After the call to document.write( ), the rewritePage( ) function calls document.close( ) to close the writing stream for the new document. While there are also document.open( ) and document.clear( ) methods, we don't need to use them to replace the contents of a window. The one document.write( ) method clears the old content, opens a new output stream, and writes the content.

Chapter 5. Making Content Dynamic

Contents:

5.1. Writing Variable Content

Example 5-1. Combining fixed and dynamic content in a rendered page

Example 5-2. Creating a new document for the current window