document.write

時間 2019-11-11

標籤 document.write document write 简体版

原文原文鏈接

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建立一個按鈕，它爲文檔組合新的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>

相關標籤/搜索

document.write

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。