JavaScript中document.write的使用与注意事项

document.write与输出流机制

需要明确的是，当页面加载完成后，浏览器的输出流会自动关闭。若在此之后调用document.write()，浏览器会开启一个新的输出流，这一操作会清空当前页面的所有内容，包括源文档中定义的变量或值。因此，如果希望通过脚本生成的HTML替换当前页面，应将所有HTML内容拼接成一个字符串，并通过一次document.write()调用完成写入。这样无需手动清除文档或打开新数据流，单次调用即可实现全部操作。

此外，还需注意与document.write()配套使用的document.close()方法。无论脚本是向当前窗口还是其他窗口写入内容，在写入完成后都必须显式关闭输出流。特别是在使用延时脚本时，最后一个document.write()之后必须紧跟document.close()，否则图像和表单可能无法正确显示。若未调用close()，后续任何document.write()调用仅会将内容追加到页面末尾，而不会清除现有内容来写入新值。为了演示这一机制，我们提供了两个版本的示例：一个向包含脚本的文档写入内容，另一个向独立窗口写入内容。请将每个文档保存为.html文件并在浏览器中打开以进行测试。

示例1创建了一个按钮，该按钮用于组合新的HTML内容，包括新文档的标题标记及颜色属性。示例中使用了读者可能不熟悉的操作符+=，它将右侧字符串追加到左侧变量中，该变量用于存储字符串。此操作符能方便地将多个独立语句组合成一个长字符串。利用存储在newContent变量中的内容，document.write()语句可将所有新内容写入文档，从而完全清除示例1中的原有内容。随后需调用document.close()以关闭输出流。当文档加载并点击按钮时，可观察到浏览器标题栏中的文档标题随之改变。若返回原始文档并再次点击按钮，会发现动态写入的第二个页面加载速度甚至比重载原始文档更快。

当前窗口写入示例

示例1展示了在当前窗口中使用document.write()的具体实现。

当前窗口写入代码实现

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

子窗口写入机制

示例2的情况更为复杂，因为脚本创建了一个子窗口，整个脚本生成的文档都将写入该窗口中。为了使新窗口的引用在两个函数间保持有效，我们将newWindow变量声明为全局变量。页面加载时，onLoad事件处理程序会调用makeNewWindow()函数，该函数生成一个空的子窗口。此外，我们在window.open()方法的第三个参数中添加了属性，以显示子窗口的状态栏。

页面上的按钮调用subWrite()方法，其首要任务是检查子窗口的closed属性。如果引用窗口已关闭，该属性（仅存在于较新的浏览器版本中）将返回true。在这种情况下（例如用户手动关闭窗口），函数会再次调用makeNewWindow()以重新打开该窗口。

窗口打开后，新内容作为字符串变量进行组合。与示例1类似，这里也采用一次性写入内容的方式（尽管对单独窗口并非必需），随后调用close()方法。但需注意一个关键区别：write()和close()方法都明确指定了子窗口对象，以确保操作作用于正确的目标。

示例2演示了在另一个窗口中使用document.write()的完整流程。

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