首頁 > 開發者 > JavaScript
js中document.write的那點事，jsdocument.write
記住，在載入頁面後，瀏覽器輸出資料流自動關閉。在此之後，任何一個對當前頁面進行操作的document.write()方法將開啟—個新的輸出資料流，它將清除當前頁面內容(包括來源文件的任何變數或值)。因此，假如希望用指令碼產生的HTML替換當前頁面，就必須把HTML內容串連起來賦給一個變數，使用一個document.write()方法完成寫操作。不必清除文檔並開啟一個新資料流，一個document.write()調用就可完成所有的操作。
關於document.write()方法還有一點要說明的是它的相關方法document.close()。指令碼向視窗(不管是本視窗或其他視窗)寫完內容後，必須關閉輸出資料流。在延時指令碼的最後一個document.write()方法後面，必須確保含有document.close()方法，不這樣做就不能顯示映像和表單。並且，任何後面調用的document.write()方法只會把內容追加到頁面後，而不會清除現有內容來寫入新值。為了示範document.write()方法，我們提供了同一個應用程式的兩個版本。一個向包含指令碼的文檔中寫內容，另—個向—個單獨的視窗寫內容。請在文字編輯器中鍵人每個文檔，以.html副檔名儲存，並在瀏覽器中開啟文檔。
樣本1建立一個按鈕，它為文檔組合新的HTML內容，包括新文檔標題的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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
