Dinge über document.write in js_Grundkenntnisse-js-Tutorial-php.cn

Dinge über document.write in js_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:27:28

Original

1589 Leute haben es durchsucht

Denken Sie daran, dass der Browser-Ausgabestream automatisch geschlossen wird, nachdem die Seite geladen wurde. Danach öffnet jede document.write()-Methode, die auf der aktuellen Seite arbeitet, einen neuen Ausgabestream, der den aktuellen Seiteninhalt (einschließlich aller Variablen oder Werte aus dem Quelldokument) löscht. Wenn Sie daher die aktuelle Seite durch von einem Skript generiertes HTML ersetzen möchten, müssen Sie den HTML-Inhalt verketten und einer Variablen zuweisen und eine document.write()-Methode verwenden, um den Schreibvorgang abzuschließen. Anstatt das Dokument zu löschen und einen neuen Datenstrom zu öffnen, kann alles mit einem einzigen document.write()-Aufruf erledigt werden.

Eine weitere Besonderheit der Methode document.write() ist die zugehörige Methode document.close(). Nachdem das Skript mit dem Schreiben von Inhalten in das Fenster (unabhängig davon, ob es sich um dieses oder ein anderes Fenster handelt) fertig ist, muss der Ausgabestream geschlossen werden. Nach der letzten document.write()-Methode des Verzögerungsskripts müssen Sie sicherstellen, dass die document.close()-Methode enthalten ist. Andernfalls können Bilder und Formulare nicht angezeigt werden. Außerdem wird bei allen nachfolgenden Aufrufen der Methode document.write() nur der Inhalt an die Seite angehängt, der vorhandene Inhalt wird jedoch nicht gelöscht, um neue Werte zu schreiben. Um die Methode document.write() zu demonstrieren, stellen wir zwei Versionen derselben Anwendung bereit. Einer schreibt in das Dokument, das das Skript enthält, der andere in ein separates Fenster. Bitte geben Sie jedes Dokument in einen Texteditor ein, speichern Sie es mit der Dateierweiterung .html und öffnen Sie das Dokument in Ihrem Browser.

Beispiel 1 erstellt eine Schaltfläche, die neuen HTML-Inhalt für das Dokument zusammenstellt, einschließlich eines HTML-Tags für den neuen Dokumenttitel und eines Farbattributs für das Tag. Im Beispiel gibt es einen Operator, der den Lesern unbekannt ist. Er fügt die Zeichenfolge auf der rechten Seite zur Variablen auf der linken Seite hinzu. Mit diesem Operator können problemlos mehrere separate Anweisungen kombiniert werden eine lange Schnur. Unter Verwendung des in der Variablen newContent kombinierten Inhalts kann die Anweisung document.write() alle neuen Inhalte in das Dokument schreiben und so den Inhalt in Beispiel 1 vollständig löschen. Anschließend müssen Sie die Anweisung document.close() aufrufen, um den Ausgabestream zu schließen. Wenn das Dokument geladen und auf die Schaltfläche geklickt wird, beachten Sie, dass sich dadurch der Dokumenttitel in der Titelleiste des Browsers ändert. Wenn Sie zum Originaldokument zurückkehren und erneut auf die Schaltfläche klicken, sehen Sie, dass die dynamisch geschriebene zweite Seite noch schneller geladen wird als das Neuladen des Originaldokuments.

Beispiel 1 verwendet document.write() im aktuellen Fenster.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
 function reWrite(){
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
  newContent += "Click the Back button to see original document."
  newContent += "</body></html>"
  // write HTML to new window document
  document.write(newContent)
  document.close() // close layout stream
 }
</script>
</head>
<body>
 <form>
  <input type="button" value="Replace Content" onClick="reWrite()">
 </form>
</body>
</html>

Nach dem Login kopieren

In Beispiel 2 ist die Situation etwas kompliziert, da das Skript ein Unterfenster erstellt, in das das gesamte vom Skript generierte Dokument geschrieben wird. Um den Verweis auf das neue Fenster in beiden Funktionen aktiv zu halten, deklarieren wir die Variable newWindow als globale Variable. Wenn die Seite geladen wird, ruft der onLoad-Ereignishandler die Funktion makeNewWindow() auf, die ein leeres untergeordnetes Fenster generiert. Darüber hinaus fügen wir dem dritten Parameter der Methode window.open() ein Attribut hinzu, um die Statusleiste des untergeordneten Fensters sichtbar zu machen.

Die Schaltfläche auf der Seite ruft die Methode subWrite() auf. Die erste Aufgabe besteht darin, das geschlossene Attribut des Unterfensters zu überprüfen. Diese Eigenschaft (nur in neueren Browserversionen vorhanden) gibt true zurück, wenn das Referenzfenster geschlossen ist. Wenn dies der Fall ist (wenn der Benutzer das Fenster manuell schließt), ruft die Funktion makeNewWindow() erneut auf, um das Fenster erneut zu öffnen.

Nach dem Öffnen des Fensters wird der neue Inhalt als String-Variable zusammengefasst. Wie in Beispiel 1 wird der Inhalt einmal geschrieben (obwohl dies für ein separates Fenster nicht notwendig ist) und dann die Methode close() aufgerufen. Beachten Sie jedoch einen wichtigen Unterschied: Sowohl die Methoden write() als auch close() geben explizit untergeordnete Fenster an.

Beispiel 2: Verwendung von document.write() in einem anderen Fenster

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
 var newWindow
 function makeNewWindow(){
  newWindow = window.open("","","status,height=200,width=300")
 }

 function subWrite(){
  // make new window if someone has closed it
  if(newWindow.closed){
   makeNewWindow()
  }
  // bring subwindow to front
  newWindow.focus()
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
  newContent += "</body></html>"
  // write HTML to new window document
  newWindow.document.write(newContent)
  newWindow.document.close()  // close layout stream
 }
</script>
</head>

<body onLoad="makeNewWindow()">
 <form>
  <input type="button" value="Write to Subwindow" onClick="subWrite()">
 </form>
</body>
</html>

Nach dem Login kopieren