I used to think that document.write () would have emptied all the contents of the document, never tried, Recently only to know that the original is to be in a specific situation in the document.write will empty the contents of the document, here, feel should tell themselves a word, more points to try, others say is not necessarily right, their own thinking is not necessarily right.
Here are a few of the tests I've done that should illustrate the usage of document.write:
1. Questions about emptying:
(1) Call the Window.onload event to clear the contents of the original document:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>document.write</title>
<script type= "Text/javascript" >
Window.onload = function () {
document.write ("You have to be good enough to support your own dreams.") ");
}
</script>
<body>
<div> Hello, world. Please try hard to be brave. </div>
</body>
The result of the above code is:
In this case, the original document content is emptied, because the Window.onload event is used, when the page is loaded to execute the event handler function, this time the document flow is closed, this time to execute document.write () The function automatically calls the Document.open () function to create a new document stream, writes new content, and then displays it through the browser, overwriting the original content.
(2) Do not call the Window.onload event, not clear the original contents of empty documents:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>document.write</title>
<script type= "Text/javascript" >
document.write ("You have to be good enough to support your own dreams.") ");
document.write ("<br/>");
document.write ("The more effort, the luckier." ");
</script>
<body>
<div> Hello, world. Please try hard to be brave. </div>
</body>
Operation Result:
Another code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>document.write</title>
<body>
<div> Hello, world. Please try hard to be brave. </div>
</body>
<script type= "Text/javascript" >
document.write ("You have to be good enough to support your own dreams.") ");
document.write ("<br/>");
document.write ("The more effort, the luckier." ");
</script>
Operation Result:
The above method does not clear the original contents of the document, because the current document flow is created by the browser, and Document.wirte () in which the document flow is not closed while executing the Document.wirte () function. You do not have to call the Document.open () function to create a new document stream, so it will not be overwritten, that is, when the document flow of the input object inside documents is the same as that of the Document.wirte () function, Document.wirte () The function does not empty the original document content, but when the browser-created document flow is closed, the Document.wirte () function calls the Document.open () function to create a new document stream, so that the written things that already exist in the original document are emptied.
(3) Do not invoke the Window.onload event, and first execute window.close () to force the closing of the document flow:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>document.write</title>
<script type= "Text/javascript" >
Document.close ();
document.write ("You have to be good enough to support your own dreams.") ");
document.write ("<br/>");
document.write ("The more effort, the luckier." ");
</script>
<body>
<div> Hello, world. Please try hard to be brave. </div>
</body>
Execution Result:
Why did you use the Window.close () function to close the document flow or not empty the contents of the original document? The reason is that the document flow is created by the browser and is not authorized to close manually, and the Document.close () function can only close the document flow created by the document.write () function.
If we use the following method to close the document flow created by the Window.write () function using the Window.close () function, the original content will be emptied:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>document.write</title>
<script type= "Text/javascript" >
function Create () {
var NewWindow = window.open ("", "newly opened page", "_blank");
NewWindow.document.write ("You have to be good enough to support your own dreams.") ");
NewWindow.document.close ();
NewWindow.document.write ("The more effort, the luckier." ");
}
</script>
<body>
<div> Hello, world. Please try hard to be brave. </div>
<input type= "button" value= "click" onclick= "Create ()" >
</body>
Input Result:
This time newWindow.document.write () will overwrite the second newWindow.document.write () function, because the first NewWindow.document.write () has been newWindow.document.close () closed the document stream.
document.write ()