這篇文章主要介紹了JS 中document.write()的用法和清空的原因淺析,需要的朋友可以參考下
可能很多朋友都遇到過這樣的情況，那就是使用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>登入後複製
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在Angular作用域中scope的如何使用
在angularjs中如何實作柱狀圖動態載入
在Vue中有關響應式原理（詳細教學）
以上是在JS中有關document.write()的用法（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
