Remember that after the page is loaded, the browser output stream is automatically closed. After this, any document.write() method that operates on the current page will open a new output stream, which will clear the content of the current page (including any variables or values of the source document). Therefore, if you want to replace the current page with the HTML generated by the script, you must connect the HTML content and assign it to a variable, and use a document.write() method to complete the write operation. Without clearing the document and opening a new data stream, a document.write() call can do everything.
Another thing to be explained about the document.write() method is its related method document.close(). After the script writes the content to the window (whether this or other window), the output stream must be closed. After the last document.write() method of the delay script, you must make sure that the document.close() method is included. If you do not do so, you cannot display images and forms. And, any subsequently called document.write() method will only append the content to the page without clearing the existing content to write the new value. To demonstrate the document.write() method, we provide two versions of the same application. One writes content to a document containing the script, and another writes content to a separate window. Please click on each document in the text editor, save it with the .html file extension, and open the document in the browser.
Example 1 creates a button that combines new HTML content for the document, including the HTML tags for the new document title and the color attributes of the tag. In the example, there is an operator += that is not familiar to readers. It adds the string on its right to the variable on its left. This variable is used to store the string. This operator can easily combine several separate statements into long strings. Using the content combined in the newContent variable, the document.write() statement can write all new content into the document, completely clearing the content in Example 1. Then you need to call the document.close() statement to close the output stream. When loading the document and clicking the button, you can notice that the document title in the browser's title bar changes as a result. When you go back to the original document and click the button again, you can see that the second page written dynamically loads even faster than reloading the original document.
Example 1 Use document.write() in the current window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title><script language="JavaScript"> function reWrite(){ // assemble content for new window var newContent = "<html><head><title>A New Doc</title></head>" newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>" newContent += "Click the Back button to see original document." newContent += "</body></html>" // write HTML to new window document document.write(newContent) document.close() // close layout stream }</script></head><body> <form> <input type="button" value="Replace Content" onClick="reWrite()"> </form></body></html>In Example 2, the situation is a bit complicated because the script creates a child window into which the entire document generated by the script will be written. To keep the reference to the new window active in both functions, we declare the newWindow variable as a global variable. When the page is loaded, the onLoad event handler calls the makeNewWindow() function, which generates an empty child window. In addition, we add a property to the third parameter of the window.open() method to make the status bar of the child window visible.
The button on the page calls the subWrite() method, and the first task it performs is to check the closed properties of the child window. If the reference window is closed, this property (only present in newer browser versions) returns true. If this is the case (if the user manually closes the window), the function calls the makeNewWindow() function again to reopen the window.
After the window opens, the new content is combined as a string variable. As in Example 1, write content at once (although it is not necessary for a separate window), and then call the close() method. But note that one important difference: both write() and close() methods clearly specify child windows.
Example 2 Use document.write() in another window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title><script language="JavaScript"> var newWindow function makeNewWindow(){ newWindow = window.open("","","status,height=200,width=300") } function subWrite(){ // make new window if someone has closed it if(newWindow.closed){ makeNewWindow() } // bring subwindow to front newWindow.focus() // assemble content for new window var newContent = "<html><head><title>A New Doc</title></head>" newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>" newContent += "</body></html>" // write HTML to new window document newWindow.document.write(newContent) newWindow.document.close() // close layout stream }</script></head><body onLoad="makeNewWindow()"> <form> <input type="button" value="Write to Subwindow" onClick="subWrite()"> </form></body></html>