Some useful tips on document.write
- 2020-03-30 02:57:24
- OfStack
Using document.write() all the time to display data to the browser as an Alert() seems like a bit of an overuse, but here's what it does.
The document.write() method can be used in two ways:
1. Add new page contents with script during page loading.
2. Use a delay script to create the contents of this or new window.
This method requires a string argument, which is the HTML content written to a window or frame. These string arguments can be variables or expressions with values as strings, and often include HTML markup language. As the following code, the educational administration system framework load subpages
<!-- Put the frame into the cell -->
<span style="font-size:18px;">
<td class="index-table-middle-center" valign="top" id="content-container">
<div id="loading">
//Load effect icon & NBSP;
<img src="images/loading.gif" alt="loading" border="0" />
</div>
<script type="text/javascript">
//Call JS's OutputIFrame function to form the frame & NBSP;
Index.OutputIframe();
</script>
</td>
</span>
<span style="font-size:18px;">//Output frame & NBSP;
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>');
};
</span>
Another thing to note about the document.write() method is its associated document.close() method. The script must close the output stream after it has written to a window, whether that window or another. After the last document.write() method in the delay script, you must make sure you have the document.close() method, otherwise you cannot display the image and form. Also, any subsequent call to the document.write() method simply appends 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 to a separate window.
Example 1 creates a button that combines new HTML content for the document, including the HTML tag for the new document title and the color attribute for the tag.
In the example, the unfamiliar operator + = adds the string to the right of it to the variable to the left of it, which is used to hold the string. This operator makes it easy to combine several separate statements into a single long string. Use the content document.write() statement combined in the newContent variable to write all the newContent to the document, completely clearing the content from example 1.
Then you need to close the output stream by calling document.close(). When the document is loaded and the button is clicked, 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 the original document.
Example 1 USES document.write() in the current window.
<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
//Re-write the function & NBSP;
function RepeatWrite(){
//Save what is written & NBSP;
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 something new & NBSP;
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>
Conclusion:
Recently, I was writing a static resource loader, which is useful to document.write. After a lot of trouble, I found that document.write still has some content, so I decided to trouble something to record, but also to accumulate something for myself.