js中document.write的那點(diǎn)事
記住,在載入頁面后,瀏覽器輸出流自動關(guān)閉。在此之后,任何一個(gè)對當(dāng)前頁面進(jìn)行操作的document.write()方法將打開—個(gè)新的輸出流,它將清除當(dāng)前頁面內(nèi)容(包括源文檔的任何變量或值)。因此,假如希望用腳本生成的HTML替換當(dāng)前頁面,就必須把HTML內(nèi)容連接起來賦給一個(gè)變量,使用一個(gè)document.write()方法完成寫操作。不必清除文檔并打開一個(gè)新數(shù)據(jù)流,一個(gè)document.write()調(diào)用就可完成所有的操作。
關(guān)于document.write()方法還有一點(diǎn)要說明的是它的相關(guān)方法document.close()。腳本向窗口(不管是本窗口或其他窗口)寫完內(nèi)容后,必須關(guān)閉輸出流。在延時(shí)腳本的最后一個(gè)document.write()方法后面,必須確保含有document.close()方法,不這樣做就不能顯示圖像和表單。并且,任何后面調(diào)用的document.write()方法只會把內(nèi)容追加到頁面后,而不會清除現(xiàn)有內(nèi)容來寫入新值。為了演示document.write()方法,我們提供了同一個(gè)應(yīng)用程序的兩個(gè)版本。一個(gè)向包含腳本的文檔中寫內(nèi)容,另—個(gè)向—個(gè)單獨(dú)的窗口寫內(nèi)容。請?jiān)谖谋揪庉嬈髦墟I人每個(gè)文檔,以.html文件擴(kuò)展名保存,并在瀏覽器中打開文檔。
示例1創(chuàng)建一個(gè)按鈕,它為文檔組合新的HTML內(nèi)容,包括新文檔標(biāo)題的HTML標(biāo)記和標(biāo)記的顏色屬性。示例中有一個(gè)讀者所不熟悉的操作符+=,它把其右側(cè)的字符串加到其左側(cè)的變量中,這個(gè)變量用來存放字符串,這個(gè)操作符能很方便地把幾個(gè)單獨(dú)的語句組合成—個(gè)長字符串。使用組合在newContent變量中的內(nèi)容,document.write()語句可以把所有新內(nèi)容寫到文檔中,完全清除示例1中的內(nèi)容。然后需要調(diào)用document.close()語句關(guān)閉輸出流。當(dāng)載入該文檔并單擊按鈕時(shí),可以注意到瀏覽器標(biāo)題欄中的文檔標(biāo)題因此而改變。當(dāng)回到原始文檔并再次單擊該按鈕時(shí),可以看到動態(tài)寫入的第二個(gè)頁面的載入速度甚至比重載原始文檔還要快。
示例1 在當(dāng)前窗口使用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中,情況有點(diǎn)復(fù)雜,因?yàn)槟_本創(chuàng)建了一個(gè)子窗口,整個(gè)腳本生成的文檔都將寫入該窗口中。為了使新窗口的引用在兩個(gè)函數(shù)中保持激活狀態(tài),我們將newWindow變量聲明為全局變量。頁面載入時(shí),onLoad事件處理調(diào)用makeNewWindow()函數(shù),該函數(shù)生成一個(gè)空的子窗口。另外,我們在window.open()方法的第三個(gè)參數(shù)中加入一個(gè)屬性,使子窗口的狀態(tài)欄可見。
頁面上的按鈕調(diào)用subWrite()方法,它執(zhí)行的第一個(gè)任務(wù)是檢查子窗口的closed屬性。假如關(guān)閉了引用窗口,該屬性(只在較新的瀏覽器版本中存在)返回true。如果是這種情況(假如用戶手動關(guān)閉窗口),該函數(shù)再次調(diào)用makeNewWindow()函數(shù)來重新打開那個(gè)窗口。
窗口打開后,新的內(nèi)容作為字符串變量組合在一起。與示例1一樣,一次性寫入內(nèi)容(雖然對單獨(dú)的窗口沒有必要),接下來調(diào)用close()方法。但是注意一個(gè)重要的區(qū)別:write() 和 close()方法都明顯地指定了子窗口。
示例2 在另一個(gè)窗口中使用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>
- JavaScript中使用document.write向頁面輸出內(nèi)容實(shí)例
- 用js的document.write輸出的廣告無阻塞加載的方法
- document.write的幾點(diǎn)使用心得
- js中document.write使用過程中的一點(diǎn)疑問解答
- js document.write()使用介紹
- document.write()及其輸出內(nèi)容的樣式、位置控制
- 深入document.write()與HTML4.01的非成對標(biāo)簽的詳解
- document.write與writeln的輸出內(nèi)容區(qū)別說明
- 在網(wǎng)頁中使用document.write時(shí)遭遇的奇怪問題
相關(guān)文章
為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問題及解決辦法
這篇文章主要介紹了為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問題及解決辦法,需要的朋友可以參考下2015-01-01JS失效 提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代
今天使用F12調(diào)試的時(shí)候提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁 utf-8 覆蓋(META 標(biāo)記)的沖突的代碼頁 utf-8,需要的朋友可以參考下2017-06-06JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用
JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用...2007-05-05客戶端腳本中常常出現(xiàn)的一些問題和調(diào)試技巧
客戶端腳本中常常出現(xiàn)的一些問題和調(diào)試技巧...2007-01-01舉例說明JavaScript中的實(shí)例對象與原型對象
這篇文章主要介紹了JavaScript中的實(shí)例對象與原型對象,針對constructor屬性和prototype屬性展開來講,需要的朋友可以參考下2016-03-03js函數(shù)中onmousedown和onclick的區(qū)別和聯(lián)系探討
了解這兩個(gè)事件的區(qū)別,但是實(shí)際并沒有使用到這兩個(gè)事件的區(qū)別去做一些操作,通常使用onclick的時(shí)候也可以使用onmousedown,使用onclick的時(shí)候更多一些2013-05-05