Inhaltsverzeichnis
multiArgument
Heim Web-Frontend js-Tutorial Verwendung von document.write() in JS (ausführliches Tutorial)

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

Jun 22, 2018 pm 05:17 PM
清空

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 id="multiArgument">multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
</body>
<!-- 运行后 -->
<body>
  <script>
    document.write(&#39;<h2 id="multiArgument">multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
  <h2 id="multiArgument">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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So stellen Sie den gelöschten Browserverlauf wieder her So stellen Sie den gelöschten Browserverlauf wieder her Feb 18, 2024 pm 10:05 PM

So stellen Sie den Webseitenverlauf wieder her, nachdem er gelöscht wurde. Datum: 10. Juni 2022 Einführung: Wenn wir täglich Computer- oder Mobiltelefonbrowser verwenden, verwenden wir häufig den Browserverlauf, um Webseiten zu finden, die wir zuvor besucht haben. Manchmal kann es jedoch vorkommen, dass wir versehentlich unseren Browserverlauf löschen, was dazu führt, dass wir eine bestimmte Webseite nicht mehr abrufen können. In diesem Artikel werde ich Ihnen einige Möglichkeiten erläutern, wie Sie den gelöschten Webverlauf wiederherstellen können. Methode 1: Verwenden Sie die Browser-Wiederherstellungsfunktion. Die meisten gängigen Browser bieten die Funktion zum Wiederherstellen des Verlaufs

So löschen Sie Inhalte auf Weibo_Tutorial zum Löschen von Inhalten auf Weibo So löschen Sie Inhalte auf Weibo_Tutorial zum Löschen von Inhalten auf Weibo Mar 30, 2024 pm 05:51 PM

1. Öffnen Sie zunächst die Weibo-App und klicken Sie unten rechts auf „Mein“. 2. Rufen Sie dann die Benutzeroberfläche des Personal Centers auf und klicken Sie oben links auf Weibo. 3. Geben Sie abschließend Weibo-Nachrichten nacheinander ein und löschen Sie sie.

Wie gehe ich mit dem Verlust des Desktops nach dem Update KB4532693 um? Wie gehe ich mit dem Verlust des Desktops nach dem Update KB4532693 um? Dec 27, 2023 am 11:41 AM

Wenn wir Computer mit dem Betriebssystem Win10 verwenden, entscheiden wir uns manchmal, wenn ein Problem auftritt, auf jeden Fall dafür, den System-Patch zu aktualisieren. Für den Fall, dass der Desktop nach der Installation des Updates KB4532693 gelöscht wird, geht der Herausgeber davon aus, dass der neue Patch möglicherweise nicht stabil genug ist, sodass bei der Verwendung weiterhin Probleme auftreten können. Wir können zunächst versuchen, den Patch zu deinstallieren. Schauen wir uns die detaillierten Schritte an, um zu sehen, wie der Editor es gemacht hat. Was tun, wenn der Desktop nach dem KB4532693-Update gelöscht wird? 1. Microsoft wird am 11. Februar mit der Veröffentlichung des Windows 10-Sicherheitspatches KB4532693 beginnen. 2. Die Systemversion Die Nummer wird auf 18363.657 aktualisiert, aber kürzlich haben einige Internetnutzer entdeckt, 3. Die Installation dieses Updates wird neue Systemprobleme verursachen, Wind

So löschen Sie die Entwurfsbox auf Weibo_Tutorial zum Löschen der Entwurfsbox auf Weibo So löschen Sie die Entwurfsbox auf Weibo_Tutorial zum Löschen der Entwurfsbox auf Weibo Mar 30, 2024 pm 08:31 PM

1. Öffnen Sie die Sina Weibo-App und geben Sie in der unteren rechten Ecke [Me] ein. 2. Nach der Eingabe können Sie das Entwurfsfeld oben auf der Seite sehen und dann darauf klicken, um es zu öffnen. 3. Drücken Sie nach der Eingabe lange auf den Entwurf, den Sie löschen möchten. Daraufhin werden die beiden Optionen [Entwurf löschen] und [Entwurfsbox löschen] angezeigt. 4. Klicken Sie auf [Entwurfsbox löschen].

So löschen Sie die Fragen, die in der Chalk-App erledigt wurden. So löschen Sie die Fragen, die in der Chalk-App erledigt wurden So löschen Sie die Fragen, die in der Chalk-App erledigt wurden. So löschen Sie die Fragen, die in der Chalk-App erledigt wurden Mar 12, 2024 pm 01:43 PM

Wie lösche ich die Fragen, die in der Chalk-App gestellt wurden? Die Chalk-App ist eine Software, die es Benutzern ermöglicht, Fragen direkt zu stellen. Diese Software verfügt auch über viele Video-Lektionen und Handouts. Benutzer können die Videos und Handouts herunterladen, die sie benötigen, wenn es WLAN gibt, damit wir sie ansehen können, ohne sie zu verbrauchen Daten beim Warten auf den Bus oder im Bus. Einige Benutzer haben einige Fragen dazu gestellt und möchten dann die Fragendatensätze löschen. Der unten stehende Editor hat zu Ihrer Information Methoden zum Löschen der Fragendatensätze zusammengestellt. Wie lösche ich die ausgefüllten Fragen in der Chalk-App? Die Chalk-App und die Webseite bieten keine Funktion zum Löschen der ausgefüllten Fragen. Wenn Sie die ausgefüllten Fragen erneut beantworten möchten, müssen Sie ein neues Konto registrieren, um sie verwenden zu können . In der Chalk APP alles

So stellen Sie Dateien wieder her, wenn Sie den Papierkorb versehentlich geleert haben So stellen Sie Dateien wieder her, wenn Sie den Papierkorb versehentlich geleert haben Feb 21, 2024 pm 06:45 PM

So stellen Sie Dateien wieder her, nachdem Sie den Papierkorb versehentlich geleert haben. Wenn wir Dateien auf dem Computer verwenden, stoßen wir häufig auf unerwartete Situationen, wie z. B. das versehentliche Leeren des Papierkorbs, wodurch wichtige Dateien gelöscht werden. Zu diesem Zeitpunkt geraten viele Menschen möglicherweise in Panik und fragen sich, wie sie gelöschte Dateien wiederherstellen können. Aber tatsächlich haben wir mit Hilfe der richtigen Methoden und Tools immer noch eine Chance, diese wichtigen Dateien wiederherzustellen. In diesem Artikel stellen wir Ihnen einige Methoden und Tools vor, mit denen Sie Dateien im Papierkorb wiederherstellen können, die Sie versehentlich geleert haben. Das müssen wir zunächst einmal verstehen

Finden Sie den Player mit der geringsten Anzahl an Nullen, nachdem Sie eine Binärzeichenfolge geleert haben (durch Entfernen nicht leerer Teilzeichenfolgen). Finden Sie den Player mit der geringsten Anzahl an Nullen, nachdem Sie eine Binärzeichenfolge geleert haben (durch Entfernen nicht leerer Teilzeichenfolgen). Sep 16, 2023 am 10:21 AM

In diesem Artikel werden wir ein interessantes Problem im Zusammenhang mit dem Bereich der String-Manipulation und der Spieltheorie diskutieren: „Leeren Sie einen binären String, indem Sie nicht leere Teilstrings entfernen, und finden Sie den Spieler mit den wenigsten verbleibenden Nullen.“ Diese Frage untersucht das Konzept der Verwendung binärer Zeichenfolgen für Wettkampfspiele. Unser Ziel ist es, den Spieler zu finden, der am Ende des Spiels die wenigsten 0 übrig hat. Wir werden dieses Problem diskutieren, eine C++-Codeimplementierung bereitstellen und das Konzept anhand eines Beispiels erläutern. Die Problemstellung verstehen Zwei Spieler erhalten eine Binärzeichenfolge und spielen abwechselnd das Spiel. In jedem Zug entfernt der Spieler nicht leere Teilzeichenfolgen, die mindestens eine „1“ enthalten. Das Spiel endet, wenn die Zeichenfolge leer ist oder keine „1“ in der Zeichenfolge vorhanden ist. Spieler, die nicht in der Lage sind, Maßnahmen zu ergreifen, verlieren das Spiel. Die Aufgabe besteht darin, die endgültige 0 zu finden

So löschen Sie gelöschte E-Mail-Datensätze im QQ-Postfach So löschen Sie gelöschte E-Mail-Datensätze im QQ-Postfach Mar 20, 2024 pm 09:26 PM

Als wichtiges Werkzeug für den täglichen Versand und Empfang von E-Mails bietet uns die QQ-Mailbox eine bequeme Kommunikationsmöglichkeit. Im täglichen Gebrauch löschen wir normalerweise gelesene E-Mails oder Spam-E-Mails, aber durch einfaches Löschen können sie nicht vollständig entfernt werden. Um Platz zu sparen und das Postfach aufgeräumt zu halten, ist es daher eine gute Angewohnheit, die gelöschten E-Mails zu leeren. Benutzer, die diese E-Mails vollständig löschen möchten, sollten diesem Artikel folgen, um mehr zu erfahren! So löschen Sie gelöschte E-Mails im QQ-Postfach 1. Klicken Sie zunächst, um das QQ-Postfach zu öffnen, scrollen Sie auf der Seite nach unten und suchen Sie die Option „Gelöscht“. 2. Klicken Sie dann, um die Seite aufzurufen, und wählen Sie die Schaltfläche „Bearbeiten“ in der oberen rechten Ecke. 3. Wählen Sie dann „Löschen“ aus den unten angezeigten Optionen aus. 4. Bestätigen Sie abschließend und klicken Sie auf Löschen 1

See all articles