I have always used the document.write() method to display data to the browser, and used it as Alert(). It seems that this kind of use is a bit underused. Let's talk about its main uses.
The document.write() method can be used in two aspects:
1. During the page loading process, add new page content with a script.
2. Use delay scripts to create the content of this window or new window.
This method requires a string parameter, which is HTML content written to a window or frame. These string parameters can be variables or expressions with values as strings, and the content written often includes HTML markup language. As in the following code, the academic system framework loads the subpage
The code copy is as follows:
<!--Put the frame into the cell-->
<span style="font-size:18px;">
<td valign="top" id="content-container">
<div id="loading">
//Load effect icon
<img src="images/loading.gif" />
</div>
<script type="text/javascript">
//Calling the OutputIFrame function of JS to form a framework
Index.OutputIframe();
</script>
</td>
</span>
The code copy is as follows:
<span style="font-size:18px;">//Output frame
Index.OutputIframe = function () {
var scrolling = $.isIE6 == true ? 'yes' : 'auto';
document.write('<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" onload="$(/'#loading/').hide();$(this).show();" src=""></iframe>');
};
</span>
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.
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.
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. Use the document.write() statement combined in the newContent variable to 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.
The code copy is as follows:
<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
//Rewrite the function
function RepeatWrite(){
// Save the written content
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 new content
document.write(newContent);
document.close();
}
</script>
</head>
<body>
<form>
<!--Click the button to call the write function-->
<input type="button" value="Replace Content" onClick="RepeatWrite()">
</form>
</body>
</html>
Summarize:
Recently I am writing a static resource loader, which uses document.write. After experiencing some twists and turns, I found that document.write still has some content, so I decided to toss something and record it, and at the same time it is also a way to accumulate something for myself.