Home > Developer > JavaScript
Jsdocument. write
Remember, after loading the page, the browser output stream is automatically closed. After that, any document that operates on the current page. the write () method opens a new output stream, which clears the content of the current page (including any variables or values in 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 to a variable and use the document. write () method to complete the write operation. Without clearing the document and opening a new data stream, a document. write () call can complete all operations.
Another note about the document. write () method is its related method document. close (). After the script writes content to the window (whether this window or other windows), the output stream must be closed. After the last document. write () method of the delayed script, you must ensure that the document. close () method is contained. If you do not do so, the image and form cannot be displayed. In addition, the document. write () method called later only appends the content to the page and does not clear the existing content to write new values. To demonstrate the document. write () method, we provide two versions of the same application. One writes content to the document containing the script, and the other writes content to a separate window. In the editor, save each document as a. html file extension and open the document in the browser.
Example 1 create a button that combines the new HTML content of the document, including the HTML Tag and the color attribute of the new document title. In this example, a reader is not familiar with the operator + =, which adds the string on the right to the variable on the left. This variable is used to store the string, this operator can easily combine several separate statements into a long string. By using the content combined in the newContent variable, the document. write () statement can write all the new content to the document and completely clear the content in Example 1. Then, you need to call the document. close () statement to close the output stream. When you load the document and click the button, you can note that the document title in the browser title bar changes accordingly. When you return to the original document and click the button again, you can see that the second page of dynamic writing is 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">In Example 2, the situation is a bit complicated because the script creates a sub-window and all the documents generated by the script are written into this window. To make the reference of the new window remain active in the two functions, we declare the newWindow variable as a global variable. When a page is loaded, onLoad event processing calls the makeNewWindow () function, which generates an empty subwindow. In addition, we add an attribute to the third parameter of the window. open () method to make the status bar of the subwindow visible.
The button on the page calls the subWrite () method. The first task it executes is to check the closed attribute of the subwindow. If the reference window is closed, true is returned for this attribute (only in a newer browser version. In this case (if you close the window manually), the function calls the makeNewWindow () function again to open the window again.
When the window opens, the new content is combined as a string variable. As in Example 1, the close () method is called next to write content at one time (although it is not necessary for a separate window. But pay attention to an important difference: the write () and close () methods both explicitly specify the subwindow.
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">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
