A brief analysis of the usage of document.write() in JS and the reasons for clearing-JS Tutorial-php.cn

A brief analysis of the usage of document.write() in JS and the reasons for clearing

小云云

Release： 2017-12-06 11:26:29

Original

2839 people have browsed it

Sometimes we encounter 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 considered a problem for beginners. Troubled, the following will introduce why this situation occurs, and of course, we will also know how to avoid this situation from happening.

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>

Copy after login

From the above code, we can see that document.write () function clears the original document content. 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, executing the document.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>

Copy after login

In the above 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, when this function is executed, the document stream is created. The stream has not been closed. The document.open() function will not be called to create a new document stream at this time, 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>

Copy after login

Use document.close() to close the document above Streamed, why can't it overwrite the original content? 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>

Copy after login

The document stream created by document.open() can be closed by document.close() , then the content output by the second document.write() will overwrite the content output by the first.

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:

A brief analysis of the usage of document.write() in JS and the reasons for clearing

// asyncWrite.js
document.open();
document.write(&#39;<p>test</p>&#39;);
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
  <script src="asyncWrite.js" async></script>
</body>
<!-- 运行后 -->
<body>
  <p>test</p>
</body>

Copy after login

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(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<!-- 运行后 -->
<script>
  document.write(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>

Copy after login

document.write() can pass in multiple parameters.

<!-- 运行前 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
</body>
<!-- 运行后 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
  <h2>multiArgument</h2>
  <p>test</p>
</body>

Copy after login

The above content is a brief analysis of the usage of document.write() in JS and the reasons for clearing it. I hope it can help everyone.

First recommendation:

js document.write() usage introduction_javascript skills

##document.write() and its output Content style and position control_javascript skills

Code generator document.write()_javascript skills

document.open() and document .write()_Basic knowledge

In-depth explanation of document.write() and the unpaired tags of HTML4.01_Basic knowledge

The above is the detailed content of A brief analysis of the usage of document.write() in JS and the reasons for clearing. For more information, please follow other related articles on the PHP Chinese website!