DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js中document.write的那點事
js中document.write的那點事
編輯:JavaScript基礎知識     

記住,在載入頁面後,浏覽器輸出流自動關閉。在此之後,任何一個對當前頁面進行操作的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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved