document.write()方法可以用在两个方面:页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言。
记住,在载入页面后,浏览器输出流自动关闭。在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值)。因此,假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量,使用一个document.write()方法完成写操作。不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。
关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后,必须关闭输出流。在延时脚本的最后一个document.write()方法后面,必须确保含有document.close()方法,不这样做就不能显示图像和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。为了演示document.write()方法,我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容,另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档,以.html文件扩展名保存,并在浏览器中打开文档。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title> 3 <script language="JavaScript"> 4 function reWrite(){ 5 // assemble content for new window 6 var newContent = "<html><head><title>A New Doc</title></head>" 7 newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>" 8 newContent += "Click the Back button to see original document." 9 newContent += "</body></html>" 10 // write HTML to new window document 11 document.write(newContent) 12 document.close() // close layout stream 13 } 14 </script> 15 </head> 16 <body> 17 <form> 18 <input type="button" value="Replace Content" onClick="reWrite()"> 19 </form> 20 </body> 21 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title> 3 <script language="JavaScript"> 4 var newWindow 5 function makeNewWindow(){ 6 newWindow = window.open("","","status,height=200,width=300") 7 } 8 9 function subWrite(){ 10 // make new window if someone has closed it 11 if(newWindow.closed){ 12 makeNewWindow() 13 } 14 // bring subwindow to front 15 newWindow.focus() 16 // assemble content for new window 17 var newContent = "<html><head><title>A New Doc</title></head>" 18 newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>" 19 newContent += "</body></html>" 20 // write HTML to new window document 21 newWindow.document.write(newContent) 22 newWindow.document.close() // close layout stream 23 } 24 </script> 25 </head> 26 27 <body onLoad="makeNewWindow()"> 28 <form> 29 <input type="button" value="Write to Subwindow" onClick="subWrite()"> 30 </form> 31 </body> 32 </html>