14.2 Creating New Page Content Dynamically
NN 2, IE 3
14.2.1 Problem
You want to use scripts to assemble
the content of a page that replaces the current page.
14.2.2 Solution
The following code gathers user-supplied text from a form on one page
to provide some of the content for an entirely new page that replaces
the first page:
<html>
<head>
<title>Welcome Page</title>
<script type="text/javascript">
// create custom page and replace current document with it
function rewritePage(form) {
// accumulate HTML content for new page
var newPage = "<html><head><title>Page for ";
newPage += form.entry.value;
newPage += "</title></head><body bgcolor='#ffffcc'>";
newPage += "<h1>Hello, " + form.entry.value + "!</h1>";
newPage += "</body></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>
14.2.3 Discussion
Because one swipe of the document.write(
) method invoked on a loaded page erases
the current page, the technique is to assemble the replacement HTML
as a single string value and then invoke document.write(
) just once, passing the string as the parameter. Bear in
mind that you are supplying text for the entire page, so any content
that you might typically put into a page's head
section (such as the document title) goes into the string. If you
fail to provide tags for the html,
head, and body elements, the
browser treats the written string as the body content of the new
page, automatically inserting the html,
head, and body elements around
your content. But it is better practice to supply those parts of the
page yourself.
You can put any well-formed HTML and script content into the string
that gets written to the new page. Thus, you can pass along script
variables and their numeric or string values within written script
tags. For example, if you wanted to pass the value of string variable
myName from the current document to the next, the
following HTML string accumulation statement puts the correct value
in place. Notice how explicit quote marks are placed around the
evaluated value, just as you'd do in a regular
script statement involving a string:
htmlString += "var myName = '" + fred + "';";
Using document.write( ) for script tags, however,
can be tricky in earlier browsers because the
</script> tag that you assemble into the
string may be interpreted as an end to the script that is assembling
the text. To avoid this problem, break up the end-script tag and
escape the forward slash, as follows:
htmlString += '<script type="text/javascript">script statement here<\/scr' + 'ipt>';
It is vital that you follow the document.write( )
statement with a call to document.close( ). Even
though the original page's script is blown away by the
document.write( ), the document.close(
) method call still executes. If you don't include
document.close( ), not all of the content of the
string written to the next page may render. This is especially true
if the content contains images or other external content.
14.2.4 See Also
Recipe 1.1 for combining string segments into one string.
|