可能很多朋友都遇到過這樣的情況，那就是使用document.write()函數向網頁中寫內容的時候，會把文檔中的原來的內容給清空，這一點對於初學者來說算是個困擾，以下就介紹為什麼會出現這種情況，當然也就知道如何避免此種情況的發生了。本文主要介紹JS 中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()建立的物件的相關問題
document.open() 與 document.write()_基礎性
js document.write()使用介紹_javascript技巧
以上是JS 中document.write()的用法和清空詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
