回前頁

最基本的網頁改寫方法：document.write()

網頁輸出
網頁瀏覽，無非就是把網頁放到瀏覽器中，供瀏覽者觀視，而在瀏覽器物件模組， 代表網頁的物件就是 document。當瀏覽器物件 window 開啟一個 document 物件做 輸出時，一個網頁設計者可以有兩種決定網頁的輸出方式：
  1. 不需要考慮使用者環境，我們是採用 HTML TAG 固定方式的 輸出。
  2. 需要考慮使用者環境，我們則可以採用 Script 敘述條件判斷式的 輸出。
HTML TAG 固定方式的輸出
這幾乎所有會寫網頁的人多少都已知道的方式，譬如： 
<HTML>
<HEAD><TITLE>Page Title</TITLE></HEAD>
<BODY>

    <!-- ... 各項網頁內容的設定 ... -->

</BODY>
</HTML>
這樣的網頁除了顯示格式會因瀏覽器稍有差異，但顯示的內容，不管你用那種規格 的瀏覽器，看到的應該都相同。
Script 敘述條件判斷式的輸出
要能在網頁中用 Script 敘述做條件判斷式的輸出，我們必須在撰寫網頁時，遵守 兩個基本規則：
  1. Script 敘述必須包夾在 <SCRIPT></SCRIPT> 標籤中。
  2. 使用 document.write("網頁輸出字串"); 語法。
譬如： 
<HTML>
<HEAD><TITLE>歡迎光臨 何處塵埃</TITLE></HEAD>
<BODY>
    <CENTER>
    親愛的 <FONT COLOR="red">

    <SCRIPT LANGUAGE=JAVASCRIPT>
    <!--
        document.write(navigator.appName);
    // -->
    </SCRIPT>

    </FONT> 使用者，歡迎來到：
    <H2>何處塵埃網站</H2>
    </CENTER>
</BODY>
</HTML>
執行結果請按 這裡。
載入時和載入後的 document.write()
當網頁第一次載入時，document.write() 方法除了不適合 <!DOCTYPE>、 <HTML>、<META>三個標籤的輸出外，幾乎所有的標籤和標籤內容， 都可以用 write() 方法輸出到網頁上，並且可以穿插在 HTML Code 中做綜合的輸出。 可是當網頁一但載入完成後，雖然 document.write() 方法仍有作用，但其結果可能 會大出你意料之外。我準備了個範例頁，在 Document 的 <BODY> 標籤內， 我是這麼安排的： 
<BODY>
    <CENTER>
    <H2>歡迎光臨何處塵埃</H2>
    <HR>
    <FORM>
        <INPUT TYPE=BUTTON VALUE='更新時間' onclick='DocumentReWrite();'>
    </FORM>
    <BR>目前時間是：
    <FONT COLOR='red'>
        <SCRIPT>
            var d=new Date();
            document.write(d.toLocaleString());
        </SCRIPT>
    </FONT>
    </CENTER>
</BODY>
用意是在網頁輸出時顯示目前時間，並且安排個時間更新按鈕，當瀏覽者按下時， 可以執行 DocumentReWrite() 自訂函數，來改寫網頁，更新時間。因此我在 Script 區段是這麼安排 DocumentReWrite() 的： 
<SCRIPT>
function DocumentReWrite()
{
    document.open();
    document.write("<CENTER>");
    document.write("<H2>歡迎光臨何處塵埃</H2>");
    document.write("<HR>");
    document.write("<FORM>");
    document.write("<INPUT TYPE=BUTTON VALUE='更新時間' onclick='DocumentReWrite();'>");
    document.write("</FORM>");
    document.write("<BR>目前時間是：");
    document.write("<FONT COLOR='red'>");
    document.write("<SCRIPT>");
    document.write("var d=new Date();");
    document.write("document.write(d.toLocaleString());");
    document.write("</SCRIPT>");
    document.write("</FONT>");
    document.write("</CENTER>");
    document.close();
}
</SCRIPT>
這段雖長，卻沒什麼大學問，就是把 BODY 中的 HTML Code 用 document.write() 方式重新寫一次而已。但當你實際執行時你會發覺，那個更新時間鈕第一次有作用， 但第二次執行瀏覽器就會回你缺少物件的錯誤訊息了。如果你用瀏覽器檢視原始檔案 的功能看網頁內容時，你會發覺在你尚未執行 DocumentReWrite() 時，整個網頁包含 了 <BODY> 和 <SCRIPT> 區段，但一旦執行完 DocumentReWrite() 後， 網頁原始內容就只剩下 BODY 區段，SCRIPT 區段完全不見了。你現在可以來試試 效果。
document.write() 的實際動作
為何同樣一個改寫方法會在載入時，和載入後有如此大的差別呢？要說明我們就 必須去瞭解 document.write() 的完整動作。其實 document.write() 是由三個連續 的動作來一起完成的，他們分別是：
  1. document.open()
      清除舊網頁，準備改寫。
  2. document.write()
      把輸出內容送到暫存區，等待輸出。
  3. document.close()
      關閉寫入功能，把所有暫存區資料顯示到網頁上。

而這些動作的進行在網頁載入時，先用 document.open() 去清掉舊網頁內容，然後 或者是 HTML Code ，或者是 document.write() ，逐一放入準備區中待命，等到網頁 載入完畢，再用 document.close() 關閉寫入資料，並且顯示網頁。所以我們雖然只在 網頁中用了 document.write() 語法，實際上是配合著瀏覽器主動替我們 open() 和 close() 一起動作的。但當我們在網頁載入完成後，用呼叫 Script function 方式 執行 document.write() 時，其實就等於是通知瀏覽器放棄目前的網頁，重新寫一份 網頁的意思，所以網頁當然只剩下你在 document.write() 所輸出的內容囉。

分清楚全網頁改寫與部份改寫
首先你必須有個觀念，document 不只是 BODY 區段而已，所有 <HTML> 標籤所包覆的，都是 document 一部份；其次是 document.write() 改寫的絕非只是 BODY ，而是整個網頁；第三是如果你只想改寫部份的網頁，甚至整個 BODY 內容， 那麼選擇 document.write() 方法是不恰當的。Internet Explorer 因此另闢蹊徑， 在大部份的網頁標籤中，提供 innerText、innerHTML、outerText、outerHTML，四個 屬性來執行部份網頁改寫功能，至於 Navigator ，對網頁內容改寫則支援較弱， 直到 4.0 版 LAYER 元件出現後，才能用其附屬的 document 子物件，執行 write() 方法，進行 LAYER 標籤內容的改寫。不過請還是要注意 write() 的三階段動作， 尤其是執行完所有的 document.write() 敘述之後，一定要接著執行 document.close() 敘述，否則所有 write 進去的內容，都無法顯示出來，這一點是操作 Navigator 改寫元件要特別注意的事。
回前頁
1