Utilisation de document.write() dans JS (tutoriel détaillé)-js tutoriel-php.cn

Utilisation de document.write() dans JS (tutoriel détaillé)

亚连

Libérer： 2018-06-22 17:17:13

original

8620 Les gens l'ont consulté

Cet article présente principalement l'utilisation de document.write() en JS et une brève analyse des raisons de l'effacement. Les amis qui en ont besoin peuvent s'y référer

De nombreux amis ont peut-être rencontré une telle situation, c'est-à-dire que lorsque vous utilisez la fonction document.write() pour écrire du contenu sur une page Web, le contenu original du document sera effacé. C'est un problème pour les débutants. Voici une introduction à la raison pour laquelle cela se produit. savoir comment éviter que cette situation ne se produise.

Regardons d'abord un exemple de code :

<!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>

Copier après la connexion

À partir du code ci-dessus, nous pouvons voir que la fonction document.write() efface le contenu du document original. Ce qui suit est une introduction. à la façon dont cette situation se produit. Raison :

L'événement window.onload consiste à exécuter la fonction de traitement d'événement une fois le contenu du document complètement chargé. Bien sûr, le flux de documents a été fermé à ce moment-là. La fonction document.writ() appellera automatiquement document.open(). La fonction crée un nouveau flux de documents, écrit un nouveau contenu et l'affiche via le navigateur, écrasant ainsi le contenu original. Cependant, de nombreux amis se demandent encore pourquoi, dans la situation suivante, le contenu de la page Web d'origine ne sera pas écrasé. Le code est le suivant :

<!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>

Copier après la connexion

Dans le code ci-dessus, le document original. le contenu n'est pas écrasé. Vide, car le flux de documents actuel est créé par le navigateur et la fonction document.wirte() s'y trouve, c'est-à-dire que le flux de documents n'est pas fermé lorsque cette fonction est exécutée, et le document. open() ne sera pas appelé pour le moment. La fonction crée un nouveau flux de documents, il ne sera donc pas écrasé. Certains amis peuvent demander pourquoi la méthode suivante ne fonctionne toujours pas. Le code est le suivant :

<!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>

Copier après la connexion

Le flux de documents est fermé à l'aide de document.close() ci-dessus. Pourquoi le contenu original n'est-il pas fermé. être écrasé ? Malheureusement, le flux de documents est créé par le navigateur et ne peut pas être fermé manuellement sans autorisation. La fonction document.close() ne peut fermer que le flux de documents créé par la fonction document.open(). Regardez l'exemple de code suivant :

<!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>

Copier après la connexion

Le flux de documents créé par document.open() peut être fermé par document.close(), puis le contenu généré par le deuxième document.write() sera écrasé. Le premier contenu de sortie.

Lors du référencement de JavaScript externe de manière asynchrone, vous devez d'abord exécuter document.open() pour effacer le document, puis exécuter document.write(). Les paramètres sont écrits au début du contenu du corps.

Si vous exécutez document.write() directement sans exécuter document.open() au préalable, il ne sera pas valide et Chrome affichera l'invite suivante :

Utilisation de document.write() dans JS (tutoriel détaillé)

// 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>

Copier après la connexion

document.write() peut également écrire des chaînes contenant des balises de script, mais elles doivent être échappées. Le contenu écrit dans la balise de script s'exécutera normalement.

<!-- 运行前 -->
<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>

Copier après la connexion

document.write() peut transmettre plusieurs paramètres.

<!-- 运行前 -->
<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>

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.