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.
| | | 4.5. Common Positioning Tasks | | 5.2. Writing to Other Frames and Windows |
Copyright © 2003 O'Reilly & Associates. All rights reserved.
|