Of Stack

Document.write in js

  • 2020-03-30 04:34:23
  • OfStack

Another thing to note about the document.write() method is its associated document.close() method. The script must close the output stream after it has written to a window, whether that window or another. After the last document.write() method in the delay script, you must make sure you have the document.close() method, otherwise you cannot display the image and form. Also, any subsequent call to the document.write() method simply appends the content to the page without clearing the existing content to write the new value. To demonstrate the document.write() method, we provide two versions of the same application. One writes to the document containing the script, and the other to a separate window. Key each document in a text editor, save it as a.html file extension, and open the document in a browser.

Example 1 creates a button that combines new HTML content for the document, including the HTML tag for the new document title and the color attribute for the tag. In the example, the unfamiliar operator + = adds the string to the right of it to the variable to the left of it, which is used to hold the string. This operator makes it easy to combine several separate statements into a single long string. Using the content combined in the newContent variable, the document.write() statement can write all the newContent to the document, completely clearing the content from example 1. Then you need to close the output stream by calling document.close(). When the document is loaded and the button is clicked, you can notice that the document title in the browser's title bar changes as a result. When you go back to the original document and click the button again, you can see that the second page written dynamically loads even faster than the original document.

Example 1 USES document.write() in the current window. 


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

In example 2, the situation is a bit more complicated because the script creates a child window into which the entire document generated by the script is written. To keep the reference to the newWindow active in both functions, we declare the newWindow variable as a global variable. When the page loads, the onLoad event handler calls the makeNewWindow() function, which generates an empty child window. In addition, we add a property to the third argument of the window.open() method to make the status bar of the child window visible.

The button on the page calls the subWrite() method, and its first task is to check the closed property of the child window. This property (which only exists in newer browser versions) returns true if the reference window is closed. If this is the case (if the user closes the window manually), the function calls the makeNewWindow() function again to reopen the window.

When the window opens, the new contents are grouped together as string variables. As in example 1, the content is written once (although it is not necessary for a separate window) and the close() method is called next. But notice one important difference: the write() and close() methods both explicitly specify child Windows.

Example 2 USES document.write() in another window 


<!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>
Related articles: