Manchmal kommt es vor, dass bei der Verwendung der Funktion document.write() zum Schreiben von Inhalten auf einer Webseite der ursprüngliche Inhalt des Dokuments gelöscht wird. Dies wird als problematisch angesehen. Im Folgenden wird erläutert, warum diese Situation auftritt, und natürlich erfahren wir auch, wie wir diese Situation vermeiden können.
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 haben wir kann das Dokument sehen Die Funktion .write() löscht den ursprünglichen Dokumentinhalt. Der folgende Grund ist:
Das window.onload-Ereignis führt die Ereignisverarbeitungsfunktion aus, nachdem der Dokumentinhalt vollständig geladen wurde Natürlich ist der Dokumentfluss zu diesem Zeitpunkt geschlossen. Durch Ausführen der Funktion document.writ () wird automatisch die Funktion document.open () aufgerufen, um einen neuen Dokumentfluss zu erstellen, neuen Inhalt zu schreiben 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 wurde der ursprüngliche Dokumentinhalt nicht gelöscht. Dies liegt daran, dass der aktuelle Dokumentstream vom Browser erstellt wird und die Funktion document.wirte() darin enthalten ist Wo diese Funktion ausgeführt wird, wurde der Dokumentstrom zu diesem Zeitpunkt noch nicht geschlossen. Die Funktion document.open() wird zu diesem Zeitpunkt nicht aufgerufen, um einen neuen Dokumentstrom zu erstellen, sodass er nicht überschrieben wird. Einige Freunde fragen sich vielleicht, warum die folgende Methode immer noch nicht funktioniert. Der Code lautet wie folgt:
<!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
Verwenden Sie document.close () oben Warum kann ich den Originalinhalt nach dem Schließen des Dokumentstreams nicht überschreiben? Leider wird der Dokumentstream vom Browser erstellt und kann nicht ohne Erlaubnis manuell geschlossen werden. Die Funktion document.close() kann nur vom Browser erstellte Dokumente schließen document.open()-Funktionsablauf. 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 pro Dokument erstellt werden. Wenn close( ) deaktiviert ist, überschreibt der vom zweiten document.write() ausgegebene Inhalt den vom ersten ausgegebenen Inhalt.
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:
// 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>
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('<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>Nach dem Login kopieren
document.write() kann mehrere Parameter übergeben.
<!-- 运行前 -->
<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>Nach dem Login kopieren
Der obige Inhalt ist eine kurze Analyse der Verwendung von document.write() in JS und der Gründe für die Löschung. Ich hoffe, dass er allen helfen kann.
Zuerst empfohlen:
Einführung in die Verwendung von js document.write()_javascript-Fähigkeiten
document.write() und seine Ausgabe Inhaltsstil und Positionskontrolle_Javascript-Fähigkeiten
Codegenerator document.write()_Javascript-Fähigkeiten
document.open() und document .write( )_Grundkenntnisse
Ausführliche Erklärung von document.write() und den ungepaarten Tags von HTML4.01_Grundkenntnisse
Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von document.write() in JS und der Gründe für das Löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
