document.write的幾點使用心得

2024-05-06 16:06:02

字體：大中小

來源：轉載

供稿：網友

一直用document.write()方法向瀏覽器中顯示數據用，把它當做Alert()使用，看來這樣用有些大材小用了，下面說說它的主要用處。

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

1.頁面載入過程中，用腳本加入新的頁面內容。

2.用延時腳本創建本窗口或新窗口的內容。

該方法需要一個字符串參數，它是寫到窗口或框架中的HTML內容。這些字符串參數可以是變量或值為字符串的表達式，寫入的內容常常包括HTML標記語言。如下面代碼，教務系統框架載入子頁

復制代碼代碼如下:

<span>
    <td valign="top">
        <div>
            //加載效果圖標
            <img src="images/loading.gif" />
        </div>
        <script type="text/javascript">
            //調用JS的OutputIFrame函數，形成框架
            Index.OutputIframe();
        </script>
    </td>
</span>

復制代碼代碼如下:

<span>//輸出框架
    Index.OutputIframe = function () {
        var scrolling = $.isIE6 == true ? 'yes' : 'auto';
        document.write('<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" 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">
</form>
</body>
</html>