document.write的幾點(diǎn)使用心得
一直用document.write()方法向?yàn)g覽器中顯示數(shù)據(jù)用,把它當(dāng)做Alert()使用, 看來這樣用有些大材小用了,下面說說它的主要用處。
document.write()方法可以用在兩個(gè)方面:
1.頁面載入過程中,用腳本加入新的頁面內(nèi)容。
2.用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容。
該方法需要一個(gè)字符串參數(shù),它是寫到窗口或框架中的HTML內(nèi)容。這些字符串參數(shù)可以是變量或值為字符串的表達(dá)式,寫入的內(nèi)容常常包括HTML標(biāo)記語言。如下面代碼,教務(wù)系統(tǒng)框架載入子頁
<!--將框架放入單元格中-->
<span style="font-size:18px;">
<td class="index-table-middle-center" valign="top" id="content-container">
<div id="loading">
//加載效果圖標(biāo)
<img src="images/loading.gif" alt="loading" border="0" />
</div>
<script type="text/javascript">
//調(diào)用JS的OutputIFrame函數(shù),形成框架
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>
在載入頁面后,瀏覽器輸出流自動關(guān)閉。在此之后,任何一個(gè)對當(dāng)前頁面進(jìn)行操作的document.write()方法將打開—個(gè)新的輸出流,它將清除當(dāng)前頁面內(nèi)容(包括源文檔的任何變量或值)。因此,假如希望用腳本生成的HTML替換當(dāng)前頁面,就必須把HTML內(nèi)容連接起來賦給一個(gè)變量,使用一個(gè)document.write()方法完成寫操作。
關(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)容。
示例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()。
<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
//重新寫入函數(shù)
function RepeatWrite(){
// 保存寫入的內(nèi)容
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>"
// 寫入新的內(nèi)容
document.write(newContent);
document.close();
}
</script>
</head>
<body>
<form>
<!--單擊按鈕調(diào)用寫入函數(shù)-->
<input type="button" value="Replace Content" onClick="RepeatWrite()">
</form>
</body>
</html>
總結(jié):
最近在寫一個(gè)靜態(tài)資源加載器, 其中有用到document.write, 在經(jīng)歷過一翻折騰后, 發(fā)現(xiàn)document.write還是有點(diǎn)內(nèi)容的,所以決定折騰點(diǎn)東西記錄下,同時(shí)也算是給自己積累點(diǎn)東西.
- JavaScript中使用document.write向頁面輸出內(nèi)容實(shí)例
- 用js的document.write輸出的廣告無阻塞加載的方法
- 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í)遭遇的奇怪問題
- js中document.write的那點(diǎn)事
相關(guān)文章
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項(xiàng)目開發(fā)中肯定會遇到同步異步執(zhí)行的問題,這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01細(xì)說JavaScript中的this指向與綁定規(guī)則
本文主要詳細(xì)介紹了JavaScript中的this指向與綁定規(guī)則,默認(rèn)綁定,隱式綁定,顯示綁定,new綁定這四個(gè)規(guī)則,文中有相關(guān)的代碼示例供大家參考,感興趣的同學(xué)可以閱讀下2023-05-05JavaScript數(shù)組實(shí)例的9個(gè)方法
這篇文章主要介紹了JavaScript數(shù)組實(shí)例的9個(gè)方法,文章圍繞主題展開詳細(xì)的內(nèi)容介紹沒具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07js鼠標(biāo)及對象坐標(biāo)控制屬性詳細(xì)解析
這篇文章主要是對js鼠標(biāo)及對象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12javascript下利用數(shù)組緩存正則表達(dá)式的實(shí)現(xiàn)方法
利用組存大法要提高我們程序的性能,讓我們的正則表達(dá)式的創(chuàng)建于執(zhí)行更有效率。2009-12-12javascript實(shí)現(xiàn)在網(wǎng)頁任意處點(diǎn)左鍵彈出隱藏菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)在網(wǎng)頁任意處點(diǎn)左鍵彈出隱藏菜單的方法,設(shè)計(jì)鼠標(biāo)事件及css樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05