Choses à propos de document.write dans les connaissances js

Choses à propos de document.write dans les connaissances js_basic

WBOY

Libérer： 2016-05-16 16:27:28

original

1595 Les gens l'ont consulté

N'oubliez pas que le flux de sortie du navigateur est automatiquement fermé une fois la page chargée. Après cela, toute méthode document.write() qui opère sur la page actuelle ouvrira un nouveau flux de sortie, qui effacera le contenu de la page actuelle (y compris toutes les variables ou valeurs du document source). Par conséquent, si vous souhaitez remplacer la page actuelle par du HTML généré par un script, vous devez concaténer le contenu HTML et l'attribuer à une variable, puis utiliser une méthode document.write() pour terminer l'opération d'écriture. Au lieu d'effacer le document et d'ouvrir un nouveau flux de données, un seul appel à document.write() peut tout faire.

Une autre chose à noter à propos de la méthode document.write() est sa méthode associée document.close(). Une fois que le script a fini d'écrire le contenu dans la fenêtre (qu'il s'agisse de cette fenêtre ou d'une autre fenêtre), le flux de sortie doit être fermé. Après la dernière méthode document.write() du script delay, vous devez vous assurer que la méthode document.close() est incluse, sinon les images et les formulaires ne pourront pas être affichés. De plus, tout appel ultérieur à la méthode document.write() ajoutera uniquement le contenu à la page, mais n'effacera pas le contenu existant pour écrire de nouvelles valeurs. Pour démontrer la méthode document.write(), nous proposons deux versions de la même application. L'un écrit dans le document contenant le script et l'autre écrit dans une fenêtre séparée. Veuillez saisir chaque document dans un éditeur de texte, enregistrez-le avec une extension de fichier .html et ouvrez le document dans votre navigateur.

L'exemple 1 crée un bouton qui assemble le nouveau contenu HTML pour le document, y compris une balise HTML pour le titre du nouveau document et un attribut de couleur pour la balise. Dans l'exemple, il y a un opérateur = qui n'est pas familier aux lecteurs. Il ajoute la chaîne du côté droit à la variable du côté gauche. Cette variable est utilisée pour stocker des chaînes. Cet opérateur peut facilement combiner plusieurs instructions distinctes. une longue chaîne. En utilisant le contenu combiné dans la variable newContent, l'instruction document.write() peut écrire tout nouveau contenu dans le document, effaçant complètement le contenu de l'exemple 1. Ensuite, vous devez appeler l'instruction document.close() pour fermer le flux de sortie. Lorsque le document est chargé et que vous cliquez sur le bouton, notez que le titre du document dans la barre de titre du navigateur change en conséquence. Lorsque vous revenez au document d'origine et cliquez à nouveau sur le bouton, vous pouvez voir que la deuxième page écrite dynamiquement se charge encore plus rapidement que le rechargement du document d'origine.

L'exemple 1 utilise document.write() dans la fenêtre actuelle.

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

Copier après la connexion

Dans l'exemple 2, la situation est un peu compliquée car le script crée une sous-fenêtre dans laquelle sera écrit l'intégralité du document généré par le script. Pour garder la référence à la nouvelle fenêtre active dans les deux fonctions, nous déclarons la variable newWindow comme variable globale. Lorsque la page est chargée, le gestionnaire d'événements onLoad appelle la fonction makeNewWindow(), qui génère une fenêtre enfant vide. De plus, nous ajoutons un attribut au troisième paramètre de la méthode window.open() pour rendre visible la barre d'état de la fenêtre enfant.

Le bouton sur la page appelle la méthode subWrite(). La première tâche qu'il effectue est de vérifier l'attribut fermé de la sous-fenêtre. Cette propriété (présente uniquement dans les versions plus récentes du navigateur) renvoie true si la fenêtre de référence est fermée. Si tel est le cas (si l'utilisateur ferme manuellement la fenêtre), la fonction appelle à nouveau makeNewWindow() pour rouvrir cette fenêtre.

Une fois la fenêtre ouverte, le nouveau contenu est combiné sous forme de variable de chaîne. Comme dans l'exemple 1, le contenu est écrit une fois (bien que cela ne soit pas nécessaire pour une fenêtre séparée), puis la méthode close() est appelée. Mais notez une différence importante : les méthodes write() et close() spécifient explicitement les fenêtres enfants.

Exemple 2 Utilisation de document.write() dans une autre fenêtre

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

Copier après la connexion