Some experience _javascript skills of document.write

Source: Internet
Author: User

Always use the document.write () method to display the data in the browser, using it as alert (), it seems to be a bit of a little overqualified, the following is the main use of it.

The document.write () method can be used in two areas:

1. In the page loading process, the new page content is added with the script.

2. Create the contents of this window or a new window with a delay script.

The method requires a string parameter, which is the HTML content written to the window or frame. These string arguments can be variables or expressions with a string value, often written to include the HTML markup language. As the following code, the educational system frame is loaded into the child page

Copy Code code as follows:

<!--put a frame in a cell-->
<span style= "FONT-SIZE:18PX;" >
&LT;TD class= "Index-table-middle-center" valign= "Top" id= "Content-container" >
<div id= "Loading" >
Load effect icon

<script type= "Text/javascript" >
Call the Outputiframe function of JS to form a frame
Index.outputiframe ();

Copy Code code as follows:

<span style= "FONT-SIZE:18PX;" >//Output Frame
Index.outputiframe = function () {
var scrolling = $.isie6 = = true? ' Yes ': ' Auto ';
document.write (' <iframe id= "content" width= "100%" height= "100%" class= "Hide" marginwidth= "0" marginheight= "0" Frameborder= "0" scrolling= "' + scrolling + '" onload= "$ (\ ' #loading \ '). Hide (); $ (this). Show ();" src= "" ></iframe " > ');

The browser output stream shuts down automatically after the page is loaded. After that, any document.write () method that operates on the current page opens-a new output stream that clears the contents of the current page (including any variables or values from the source document). Therefore, if you want to replace the current page with script-generated HTML, you must attach the HTML content to a variable, and use a document.write () method to complete the write operation.

One more thing about the document.write () method is that it's related to the method Document.close (). After the script has finished writing to the window (either this window or another window), the output stream must be turned off. After the last document.write () method of the delay script, you must ensure that the Document.close () method is included, and you cannot display images and forms without doing so. Also, any subsequent calls to the 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 to the document containing the script, and the other-a separate window to write the content.

Example 1 creates a button that combines new HTML content for the document, including the HTML markup for the new document title and the color attributes of the markup.

In the example, there is an operator = = that is unfamiliar to the reader, and it adds the string to its right to the variable on its left, which holds the string, which makes it easy to combine several separate statements into a long string. Using the contents of a combination in a newcontent variable document.write () statement can write all new content to the document and completely clear the contents of Example 1.

You then need to call the Document.close () statement to close the output stream. When you load the document and click the button, you notice that the document title in the browser's title bar changes. When you return to the original document and click the button again, you can see that the second page that is written dynamically is loaded even faster than the original document.

Example 1 uses document.write () in the current window.

Copy Code code as follows:

<script language= "JavaScript" >
Re-write function
function Repeatwrite () {
Save the written content
var newcontent = "Newcontent = "<body bgcolor= ' Aqua ' >Newcontent + = "Click the back button to the original document."
Newcontent = "</body>Write a new content
document.write (newcontent);
Document.close ();

<!--Click the button to invoke the Write function-->
<input type= "button" value= "Replace Content" onclick= "Repeatwrite ()" >


Recently in writing a static resource loader, which useful to document.write, after a toss, found that the document.write is still a bit of content, so decided to toss something in the record, but also to accumulate something for themselves.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.