JavaScript

   


文件 (document)


簡介

本站的初階教學已介紹過 document 的簡單用法, 所以現在會介紹一個常用的技巧, 就是用 document.write() 動態地製造網頁。

方法

方法 說明
close() 關閉輸出管道(Stream), 強迫資料顯示到螢幕
open(mimeType, "replace") 開啟新的管道, 收集由 write() 或 writeln() 所寫的資料。 mimeType 是資料的 MIME 型態, 例如 "text/html"; 如果 "replace" 參數存在的話, 新的管道資料就會取代之前的記錄清單 (History List)
write(html) html 字串寫到網頁
writeln(html) 與 write(html) 功能一樣, 分別是 writeln 會在 html 字串尾加入分行符號

動態地製造網頁

即是用 JavaScript 寫出 HTML 或其它資料, 一般做法是:

document.close();
document.open();
document.write();

    如果你想寫的資料是純文字或 HTML, 就可以省略 document.open()。 如果不用 document.close() 來關閉資料, 那麼 document.write 寫入的資料就會伸延到之前的文件。

    例子:不用 document.close(), 寫入的資料就會伸延到文件的尾部

    <form>
    <input type=button value="write hello to the end" onclick="document.write('hello')">
    </form>

    例子:用了 document.close(), 就會在新的一頁寫入的資料

    <form>
    <input type=button value="write hello in a new page"
    onclick="document.close();document.write('hello')">
    </form>

    當我們要 document.write() 來寫幾頁以上的文件, 通常會將所有的 JavaScript 放到另一個檔案, 這樣就不用擔心文件內的 JavaScript 會在寫入資料時被刪除。

    例子:按一次按鈕就製造一頁文件   js_tut_eg_document.htm

    js_tut_eg_document.htm
    <html><head>
    <script src="js_tut_eg_document.js"></script>
    </head>
    <body onload="newpage(0)">
    </body></html>
    js_tut_eg_document.js
    function newpage(count) {
    count++
    var output='<html><head><title>' + count + '</title>'+
        '<script src="js_tut_eg_document.js"></script>'+
        '</head><body>'+ count +
        '<form><input type=button value="New Page" '+
        'onclick="newpage(' + count + ')"></form>'+
        '</body></html>'
    document.close()
    document.write(output)
    }

    說明:

    • 我們將所有要輸出的 HTML 都放到 output 變數, 到最後用 document.write 一次過寫到文件

    例子:逐步詢問使用者資料, 類似視窗系統的精靈  js_tut_eg_document1.htm

     

     







[到頁頂] [首頁] [速查表]