快捷導(dǎo)航

document.write的幾點(diǎn)使用心得

更新時(shí)間：2014年05月14日 11:50:50 作者：

一直用document.write()方法向?yàn)g覽器中顯示數(shù)據(jù)用，把它當(dāng)做Alert()使用，看來(lái)這樣用有些大材小用了，下面說(shuō)說(shuō)它的主要用處。

document.write()方法可以用在兩個(gè)方面：

1.頁(yè)面載入過(guò)程中，用腳本加入新的頁(yè)面內(nèi)容。

2.用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容。

該方法需要一個(gè)字符串參數(shù)，它是寫(xiě)到窗口或框架中的HTML內(nèi)容。這些字符串參數(shù)可以是變量或值為字符串的表達(dá)式，寫(xiě)入的內(nèi)容常常包括HTML標(biāo)記語(yǔ)言。如下面代碼，教務(wù)系統(tǒng)框架載入子頁(yè)

復(fù)制代碼代碼如下:

<!--將框架放入單元格中-->
<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>

復(fù)制代碼代碼如下:

<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>

在載入頁(yè)面后，瀏覽器輸出流自動(dòng)關(guān)閉。在此之后，任何一個(gè)對(duì)當(dāng)前頁(yè)面進(jìn)行操作的document.write()方法將打開(kāi)—個(gè)新的輸出流，它將清除當(dāng)前頁(yè)面內(nèi)容(包括源文檔的任何變量或值)。因此，假如希望用腳本生成的HTML替換當(dāng)前頁(yè)面，就必須把HTML內(nèi)容連接起來(lái)賦給一個(gè)變量，使用一個(gè)document.write()方法完成寫(xiě)操作。

關(guān)于document.write()方法還有一點(diǎn)要說(shuō)明的是它的相關(guān)方法document.close()。腳本向窗口(不管是本窗口或其他窗口)寫(xiě)完內(nèi)容后，必須關(guān)閉輸出流。在延時(shí)腳本的最后一個(gè)document.write()方法后面，必須確保含有document.close()方法，不這樣做就不能顯示圖像和表單。并且，任何后面調(diào)用的document.write()方法只會(huì)把內(nèi)容追加到頁(yè)面后，而不會(huì)清除現(xiàn)有內(nèi)容來(lái)寫(xiě)入新值。

為了演示document.write()方法，我們提供了同一個(gè)應(yīng)用程序的兩個(gè)版本。一個(gè)向包含腳本的文檔中寫(xiě)內(nèi)容，另—個(gè)向—個(gè)單獨(dú)的窗口寫(xiě)內(nèi)容。

示例1創(chuàng)建一個(gè)按鈕，它為文檔組合新的HTML內(nèi)容，包括新文檔標(biāo)題的HTML標(biāo)記和標(biāo)記的顏色屬性。

示例中有一個(gè)讀者所不熟悉的操作符+＝，它把其右側(cè)的字符串加到其左側(cè)的變量中，這個(gè)變量用來(lái)存放字符串，這個(gè)操作符能很方便地把幾個(gè)單獨(dú)的語(yǔ)句組合成—個(gè)長(zhǎng)字符串。使用組合在newContent變量中的內(nèi)容document.write()語(yǔ)句可以把所有新內(nèi)容寫(xiě)到文檔中，完全清除示例1中的內(nèi)容。

然后需要調(diào)用document.close()語(yǔ)句關(guān)閉輸出流。當(dāng)載入該文檔并單擊按鈕時(shí)，可以注意到瀏覽器標(biāo)題欄中的文檔標(biāo)題因此而改變。當(dāng)回到原始文檔并再次單擊該按鈕時(shí)，可以看到動(dòng)態(tài)寫(xiě)入的第二個(gè)頁(yè)面的載入速度甚至比重載原始文檔還要快。

示例1 在當(dāng)前窗口使用document.write()。

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>  

<script language="JavaScript">  
  //重新寫(xiě)入函數(shù)  
  function RepeatWrite(){  
    // 保存寫(xiě)入的內(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>"  
    // 寫(xiě)入新的內(nèi)容  
    document.write(newContent);  
    document.close();  
  }  

</script>  
</head>  
<body>  
  <form>  
    <!--單擊按鈕調(diào)用寫(xiě)入函數(shù)-->  
    <input type="button" value="Replace Content" onClick="RepeatWrite()">  
  </form>  
</body>  
</html>

總結(jié):

　　最近在寫(xiě)一個(gè)靜態(tài)資源加載器, 其中有用到document.write, 在經(jīng)歷過(guò)一翻折騰后, 發(fā)現(xiàn)document.write還是有點(diǎn)內(nèi)容的,所以決定折騰點(diǎn)東西記錄下,同時(shí)也算是給自己積累點(diǎn)東西.

您可能感興趣的文章: