Verwendung von document.write() in JS (ausführliches Tutorial)-js-Tutorial-php.cn

Verwendung von document.write() in JS (ausführliches Tutorial)

亚连

Freigeben： 2018-06-22 17:17:13

Original

8620 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von document.write() in JS vorgestellt und die Gründe für das Löschen kurz analysiert. Freunde, die es benötigen, können darauf verweisen

Viele Freunde sind möglicherweise auf eine solche Situation gestoßen. Das heißt, wenn Sie die Funktion document.write () zum Schreiben von Inhalten auf einer Webseite verwenden, wird der ursprüngliche Inhalt des Dokuments gelöscht. Dies ist ein Problem für Anfänger. Hier finden Sie eine Einführung, warum dies geschieht wissen, wie man diese Situation vermeiden kann.

Schauen wir uns zunächst ein Codebeispiel an:

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

Nach dem Login kopieren

Aus dem obigen Code können wir ersehen, dass die Funktion document.write() den ursprünglichen Dokumentinhalt löscht Gründe für diese Situation:

Das window.onload-Ereignis dient dazu, die Ereignisverarbeitungsfunktion auszuführen, nachdem der Dokumentinhalt vollständig geladen wurde. Zu diesem Zeitpunkt wurde der Dokumentstrom natürlich geschlossen Die Funktion () ruft automatisch die Funktion document.open() auf, um einen neuen Dokumentstrom mit neuem Inhalt zu erstellen und ihn dann über den Browser anzuzeigen, wodurch der ursprüngliche Inhalt überschrieben wird. Viele Freunde haben jedoch immer noch die Frage, warum in der folgenden Situation der Inhalt der ursprünglichen Webseite nicht überschrieben wird. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Im obigen Code ist der Inhalt des Originaldokuments vorhanden Dies liegt daran, dass der aktuelle Dokumentstrom vom Browser erstellt wird und die Funktion document.wirte() darin enthalten ist. Das heißt, der Dokumentstrom wird nicht geschlossen, wenn diese Funktion ausgeführt wird, und die Funktion document.open( )-Funktion wird zu diesem Zeitpunkt nicht aufgerufen. Das neue Dokument fließt daher nicht überschrieben. Einige Freunde fragen sich vielleicht, warum die folgende Methode immer noch nicht funktioniert:

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

Nach dem Login kopieren

Der Dokumentfluss wird oben mit document.close() geschlossen ? Leider wird der Dokumentenfluss vom Browser erstellt und kann ohne Erlaubnis nicht manuell geschlossen werden. Die Funktion document.close() kann nur den von der Funktion document.open() erstellten Dokumentenfluss schließen. Schauen Sie sich das folgende Codebeispiel an:

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

Nach dem Login kopieren

Der von document.open() erstellte Dokumentstrom kann von document.close() geschlossen werden, dann überschreibt der vom zweiten document.write() ausgegebene Inhalt den ersten den Inhalt der Ausgabe.

Wenn Sie asynchron auf externes JavaScript verweisen, müssen Sie zuerst document.open() ausführen, um das Dokument zu löschen, und dann document.write() ausführen. Die Parameter werden am Anfang des Hauptinhalts geschrieben.

Wenn Sie document.write() direkt ausführen, ohne zuerst document.open() auszuführen, ist es ungültig und Chrome zeigt die folgende Eingabeaufforderung an:

Verwendung von document.write() in JS (ausführliches Tutorial)

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

Nach dem Login kopieren

document.write() kann auch Zeichenfolgen schreiben, die Skript-Tags enthalten, diese müssen jedoch maskiert werden. Der im Skript-Tag geschriebene Inhalt wird normal ausgeführt.

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

Nach dem Login kopieren

document.write() kann mehrere Parameter übergeben.

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

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie den Bereich im Angular-Bereich

So implementieren Sie das dynamische Laden von Balkendiagrammen in AngularJS

Über reaktive Prinzipien in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonVerwendung von document.write() in JS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!