首頁 > 開發者 > JavaScript
一直用document.write()方法向瀏覽器中顯示資料用，把它當做Alert()使用， 看來這樣用有些大材小用了，下面說說它的主要用處。
document.write()方法可以用在兩個方面：
1.頁面載入過程中，用指令碼加入新的頁面內容。
2.用延時指令碼建立本視窗或新視窗的內容。
該方法需要一個字串參數，它是寫到視窗或架構中的HTML內容。這些字串參數可以是變數或值為字串的運算式，寫入的內容常常包括HTML標記語言。如下面代碼，教務系統架構載入子頁
複製代碼 代碼如下:
<!--將架構放入儲存格中-->
<span style="font-size:18px;">
<td class="index-table-middle-center" valign="top" id="content-container">
<div id="loading">
//載入標
<img src="images/loading.gif" alt="loading" border="0" />
</div>
<script type="text/javascript">
//調用JS的OutputIFrame函數，形成架構
Index.OutputIframe();
</script>
</td>
</span>
複製代碼 代碼如下:
<span style="font-size:18px;">//輸出架構
Index.OutputIframe = function () {
var scrolling = $.isIE6 == true ? 'yes' : 'auto';
document.write('<iframe id="content" width="100%" height="100%" class="hide" marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" onload="$(\'#loading\').hide();$(this).show();" src=""></iframe>');
};
</span>
在載入頁面後，瀏覽器輸出資料流自動關閉。在此之後，任何一個對當前頁面進行操作的document.write()方法將開啟—個新的輸出資料流，它將清除當前頁面內容(包括來源文件的任何變數或值)。因此，假如希望用指令碼產生的HTML替換當前頁面，就必須把HTML內容串連起來賦給一個變數，使用一個document.write()方法完成寫操作。
關於document.write()方法還有一點要說明的是它的相關方法document.close()。指令碼向視窗(不管是本視窗或其他視窗)寫完內容後，必須關閉輸出資料流。在延時指令碼的最後一個document.write()方法後面，必須確保含有document.close()方法，不這樣做就不能顯示映像和表單。並且，任何後面調用的document.write()方法只會把內容追加到頁面後，而不會清除現有內容來寫入新值。
為了示範document.write()方法，我們提供了同一個應用程式的兩個版本。一個向包含指令碼的文檔中寫內容，另—個向—個單獨的視窗寫內容。
樣本1建立一個按鈕，它為文檔組合新的HTML內容，包括新文檔標題的HTML標記和標記的顏色屬性。
樣本中有一個讀者所不熟悉的操作符+＝，它把其右側的字串加到其左側的變數中，這個變數用來存放字串，這個操作符能很方便地把幾個單獨的語句組合成—個長字串。使用組合在newContent變數中的內容document.write()語句可以把所有新內容寫到文檔中，完全清除樣本1中的內容。
然後需要調用document.close()語句關閉輸出資料流。當載入該文檔並單擊按鈕時，可以注意到瀏覽器標題列中的文檔標題因此而改變。當回到原始文檔並再次單擊該按鈕時，可以看到動態寫入的第二個頁面的載入速度甚至比重載原始文檔還要快。
樣本1 在當前視窗使用document.write()。
複製代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
//重新寫入函數
function RepeatWrite(){
// 儲存寫入的內容
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>"
// 寫入新的內容
document.write(newContent);
document.close();
}
</script>
</head>
<body>
<form>
<!--單擊按鈕調用寫入函數-->
<input type="button" value="Replace Content" onClick="RepeatWrite()">
</form>
</body>
</html>
總結:
最近在寫一個靜態資源載入器, 其中有用到document.write, 在經曆過一翻折騰後, 發現document.write還是有點內容的,所以決定折騰點東西記錄下,同時也算是給自己積累點東西.
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
