Chapter 5. Making Content Dynamic
Writing Variable Content
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
Example 5-1. Combining fixed and dynamic content in a rendered page
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
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.
Copyright © 2003 O'Reilly & Associates. All rights reserved.