document.write()

本文轉載自查看原文 2021-10-19 20:25 140

`Document.write()` 方法將一個文本字符串寫入一個由 `document.open()` 打開的文檔流（document stream）。

document.write方法可向文檔寫入 HTML 表達式或 JavaScript 代碼。

語法 document.write(exp1,exp2,exp3,....)

注意：因為document.write需要向文檔流中寫入關閉內容，所以，若在一個已完成（例如，已完成加載）的文檔上調用document.write，會自動調用document.open

document.write()方法可以用在兩個方面：頁面載入過程中用實時腳本創建頁面內容，以及用延時腳本創建本窗口或新窗口的內容。該方法需要一個字符串參數，它是寫到窗口或框架中的HTML內容。這些字符串參數可以是變量或值為字符串的表達式，寫入的內容常常包括HTML標記語言。

記住，在載入頁面后，瀏覽器輸出流自動關閉。在此之后，任何一個對當前頁面進行操作的document.write()方法將打開—個新的輸出流，它將清除當前頁面內容(包括源文檔的任何變量或值)。因此，假如希望用腳本生成的HTML替換當前頁面，就必須把HTML內容連接起來賦給一個變量，使用一個document.write()方法完成寫操作。不必清除文檔並打開一個新數據流，一個document.write()調用就可完成所有的操作。

關於document.write()方法還有一點要說明的是它的相關方法document.close()。腳本向窗口(不管是本窗口或其他窗口)寫完內容后，必須關閉輸出流。在延時腳本的最后一個document.write()方法后面，必須確保含有document.close()方法，不這樣做就不能顯示圖像和表單。並且，任何后面調用的document.write()方法只會把內容追加到頁面后，而不會清除現有內容來寫入新值。為了演示document.write()方法，我們提供了同一個應用程序的兩個版本。一個向包含腳本的文檔中寫內容，另—個向—個單獨的窗口寫內容。請在文本編輯器中鍵人每個文檔，以.html文件擴展名保存，並在瀏覽器中打開文檔。

示例1創建一個按鈕，它為文檔組合新的HTML內容，包括新文檔標題的HTML標記和標記的顏色屬性。示例中有一個讀者所不熟悉的操作符+＝，它把其右側的字符串加到其左側的變量中，這個變量用來存放字符串，這個操作符能很方便地把幾個單獨的語句組合成—個長字符串。使用組合在newHtml變量中的內容，document.write()語句可以把所有新內容寫到文檔中，完全清除示例1中的內容。然后需要調用document.close()語句關閉輸出流。當載入該文檔並單擊按鈕時，可以注意到瀏覽器標題欄中的文檔標題因此而改變。當回到原始文檔並再次單擊該按鈕時，可以看到動態寫入的第二個頁面的載入速度甚至比重載原始文檔還要快。

例1 在當前窗口使用document.write()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script language="JavaScript">
        function xrWrite() {
            // 在窗口組合內容
            var newHtml = "<html><head><title>write寫入內容</title></head>"
            newHtml += "<body bgcolor='pink'><h1>write寫入的內容</h1>"
            newHtml += "內容............."
            newHtml += "</body></html>"
            //將 HTML 寫入新窗口文檔
            document.write(newHtml)
            document.close() // 關閉流
        }
    </script>

    <form>
        <input type="button" value="替換內容" onClick="xrWrite()">
    </form>

</body>

</html>

點擊

例2中，情況有點復雜，因為腳本創建了一個子窗口，整個腳本生成的文檔都將寫入該窗口中。為了使新窗口的引用在兩個函數中保持激活狀態，我們將newWindow變量聲明為全局變量。頁面載入時，onLoad事件處理調用makeNewWindow()函數，該函數生成一個空的子窗口。另外，我們在window.open()方法的第三個參數中加入一個屬性，使子窗口的狀態欄可見。

頁面上的按鈕調用subWrite()方法，它執行的第一個任務是檢查子窗口的closed屬性。假如關閉了引用窗口，該屬性（只在較新的瀏覽器版本中存在）返回true。如果是這種情況（假如用戶手動關閉窗口），該函數再次調用makeNewWindow()函數來重新打開那個窗口。

窗口打開后，新的內容作為字符串變量組合在一起。與示例1一樣，一次性寫入內容（雖然對單獨的窗口沒有必要），接下來調用close()方法。但是注意一個重要的區別：write() 和 close()方法都明顯地指定了子窗口。

例2 在另一個窗口中使用document.write()

<!DOCTYPE html>

<head>

<title>Document</title>

var newWindow; //申明全局變量，該變量是空的（它沒有值

function makeNewWindow() {

newWindow = window.open("", "", "status,height=200,width=300") //window.open() 方法用於打開一個新的瀏覽器窗口

}

function subWrite() {

// 如果有人關閉了它，則創建新窗口,closed 屬性可返回一個布爾值，該值聲明了窗口是否已經關閉。

if (newWindow.closed) {

makeNewWindow() //則創建新窗口

}

// 將子窗口置於最前面, focus() 方法將焦點設置到當前窗口，也就是將窗口顯示在前（靠近屏幕）。

newWindow.focus()

// 為新窗口組合內容

var newHtml = "<html><head><title>write寫入內容</title></head>"

newHtml += "內容............."

newHtml += "</body></html>"

// 將 HTML 寫入新窗口文檔

newWindow.document.write(newHtml)

newWindow.document.close() // 關閉流

}

</script>

</head>

<form>

</form>

</body>

</html>

參考文檔：https://www.cnblogs.com/dh616854836/articles/2140349.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 document.write() 關於document.write 閑扯『 document.write 』 document.write和innerHTML的區別 document.write()重寫問題 document.write覆蓋問題 document.write和innerHTML的區別關於document.write()重寫頁面解決document.write問題 document.write() 和 document.writeln() 區別

document.write()

Document.write() 方法將一個文本字符串寫入一個由 document.open() 打開的文檔流（document stream）。

免責聲明！

`Document.write()` 方法將一個文本字符串寫入一個由 `document.open()` 打開的文檔流（document stream）。