Home > Article > Web Front-end > Detailed explanation of usage and clearing of document.write() in JS
Many friends may have encountered such a situation, that is, when using the document.write() function to write content to a web page, the original content in the document will be cleared. This is especially useful for beginners. It’s a problem. Let’s introduce why this happens. Of course, we will also know how to avoid it. This article mainly introduces the usage of document.write() in JS and a brief analysis of the reasons for clearing. Friends who need it can refer to it. I hope it can help everyone.
Let’s look at a code example first:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
document.write("重温 JavaScript");
}
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>
From the above code, we can see that the document.write() function converts the original The document content has been cleared. The following is the reason for this situation:
The window.onload event is to execute the event processing function after the document content is completely loaded. Of course, the document stream has been closed. At this time, the document flow is executed. The .writ() function will automatically call the document.open() function to create a new document stream, write new content, and then display it through the browser, thus overwriting the original content. However, many friends still have this question, why in the following situation, the content in the original web page will not be overwritten, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>
above In the code, the original document content has not been cleared. This is because the current document stream is created by the browser, and the document.wirte() function is in it. That is, the document stream is not closed when this function is executed. At this time, the document.open() function will not be called to create a new document stream, so it will not be overwritten. Some friends may ask why the following method still does not work. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.close();
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>
The document flow is closed using document.close() above, why does it still not work? The original content can be overwritten. Unfortunately, the document stream is created by the browser and cannot be closed manually without permission. The document.close() function can only close the document stream created by the document.open() function. Look at the following code example:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
function create(){
var newWindow=window.open("","Document","_blank");
newWindow.document.write("Hello JavaScript");
newWindow.document.close();
newWindow.document.write("覆盖后的输出");
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
create();
}
}
</script>
</head>
<body>
<p id="print">Hello JavaScript</p>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
The document stream created by document.open() can be closed by document.close(), then the second document The content output by .write() will overwrite the first output content.
When referencing external JavaScript asynchronously, you must first run document.open() to clear the document, and then run document.write(). The parameters are written at the beginning of the body content.
If you run document.write() directly without running document.open() first, it will be invalid and Chrome will have the following prompt:
// asyncWrite.js document.open(); document.write('<p>test</p>'); document.close(); <!-- asyncWrite.html --> <!-- 运行前 --> <body> <script src="asyncWrite.js" async></script> </body> <!-- 运行后 --> <body> <p>test</p> </body>
Document.write() can also write strings containing script tags, but they need to be escaped. The content written in the script tag will run normally.
<!-- 运行前 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>
document.write() can pass in multiple parameters.
<!-- 运行前 -->
<body>
<script>
document.write('<h2>multiArgument</h2>','<p>test</p>');
</script>
</body>
<!-- 运行后 -->
<body>
<script>
document.write('<h2>multiArgument</h2>','<p>test</p>');
</script>
<h2>multiArgument</h2>
<p>test</p>
</body>
Related recommendations:
JS issues related to obtaining an object created by document.write()
document.open() and document.write()_basic knowledge
js document.write() usage introduction_javascript skills
The above is the detailed content of Detailed explanation of usage and clearing of document.write() in JS. For more information, please follow other related articles on the PHP Chinese website!