有時候會遇到這樣的情況，那就是使用document.write()函數向網頁中寫內容的時候，會把文件中的原來的內容給清空，這一點對於初學者來說算是一個困擾，以下就介紹為什麼會出現這種情況，當然也就知道如何避免這種情況的發生了。
先看一段程式碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
document.write("重温 JavaScript");
}
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>登入後複製
從以上程式碼的可以看出document.write ()函數將原來的文件內容清空了，下面介紹一下出現此種情況的原因:
window.onload事件是在文檔內容完全加載完畢再去執行事件處理函數，當然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動呼叫document.open()函數來建立一個新的文件流，並寫入新的內容，再透過瀏覽器展現，這樣就會覆蓋原來的內容。不過很多朋友還有會這樣的疑問，為什麼類似下面的情況，原來網頁中的內容不會被覆蓋,代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>登入後複製
# 在上述程式碼中，原來的文檔內容並沒有被清空，這是因為當前文檔流是由瀏覽器所創建，並且document.wirte()函數身處其中，也就是執行此函數的時候文檔流並沒有被關閉，這個時候不會呼叫document.open()函數來建立新文件流，所以也就不會被覆蓋了。可能還有朋友會問為什麼下面的方式還是不行，程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
document.close();
document.write("重温 JavaScript");
</script>
</head>
<body>
<p>Hello JavaScript</p>
</body>
</html>登入後複製
上面使用document.close()關閉文檔流了，為什麼還是不能夠覆蓋原來的內容的，很遺憾，文檔流是由瀏覽器創建，無權限手動關閉，document.close()函數只能夠關閉由document.open()函數創建的文檔流。看下面的程式碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Document</title>
<script type="text/javascript">
function create(){
var newWindow=window.open("","Document","_blank");
newWindow.document.write("Hello JavaScript");
newWindow.document.close();
newWindow.document.write("覆盖后的输出");
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
create();
}
}
</script>
</head>
<body>
<p id="print">Hello JavaScript</p>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>登入後複製
# 由doucment.open()建立的文件流就可以由document.close()關閉，那麼第二個document.write()輸出的內容就會覆寫第一個輸出的內容。
非同步引用外部JavaScript時，必須先執行document.open()清空文檔，然後才能執行document.write()，參數寫在body內容的開頭。
如果不先運行document.open()，直接運行document.write()，則無效且Chrome有以下提示：
// asyncWrite.js
document.open();
document.write('<p>test</p>');
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
<script src="asyncWrite.js" async></script>
</body>
<!-- 运行后 -->
<body>
<p>test</p>
</body>
登入後複製
document.write()也能寫入含有script標籤的字串，但需要轉義。寫入的script標籤中的內容會正常運作。
<!-- 运行前 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>登入後複製
document.write()可以傳入多個參數。
<!-- 运行前 -->
<body>
<script>
document.write('<h2>multiArgument</h2>','<p>test</p>');
</script>
</body>
<!-- 运行后 -->
<body>
<script>
document.write('<h2>multiArgument</h2>','<p>test</p>');
</script>
<h2>multiArgument</h2>
<p>test</p>
</body>登入後複製
以上內容就是JS 中document.write()的用法和清空的原因淺析，希望能幫助大家。
先關推薦：
js document.write()使用介紹_javascript技巧
document.write()及其輸出內容的樣式、位置控制_javascript技巧
程式碼產生器 document.write()_javascript技巧
document.open() 與 document .write()_基礎知識
深入document.write()與HTML4.01的非成對標籤的詳解_基礎知識
以上是JS 中document.write()的用法和清空的原因淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
