document.write() 清空覆蓋內容

admin發表於2018-12-05

document.write方法可以在文件中寫入指定的字串。

方法雖然比較簡單，不過其中也有很多知識點需要特別注意。

會面會通過程式碼例項對一些要點做詳細介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
document.write(exp1,exp2,exp3,....)

引數解析：

（1）.expN：可以按照指定順序一次性在文件寫入一個或者多個字串。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
document.write("本站url地址是");
</script> 
</head> 
<body>
softwhy.com
</body> 
</html>

上述程式碼可以在文件中寫入字串"本站url地址是"。

為了滿足實際需求，可能需要將內容寫入指定位置，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head> 
<body>
softwhy.com
<script>
document.write("是本站url地址");
</script>
</body> 
</html>

上面程式碼會在網址後面插入指定的字串。

前面程式碼都比較簡單，應該沒有任何疑問，但是此方法有時候的表現會讓人匪夷所思。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  document.write("www.softwhy.com");
}
</script> 
</head> 
<body> 
是本站的url地址
</body> 
</html>

上述程式碼的本意是在頁面生成一段完整的語句：

www.softwhy.com是本站的url地址，然而實際情況是頁面原來的內容被清空覆蓋。

看到上面的表現，首先是感覺怪異，第二個感覺操作挺危險的，如果使用不當可能會引起嚴重的問題。

下面就分析一下原因，由此可以避免再次發生上述類似問題：

（1）.document.write方法的呼叫時機是文件內檔內容完全載入完畢之後。

（2）.此時文件流已經關閉。

（3）.當呼叫document.write方法的時候，會隱式呼叫document.open方法。

（4）document.open方法會新建立一個文件流，會覆蓋原來文件的內容，所以原來的內容被清空了。

由上面的結論引出新的問題：

既然執行document.write()會隱式呼叫document.open方法。

為什麼本文前兩個程式碼例項並沒有情況原有內容的現象內，原因分析如下：

（1）.document.write方法執行的時候，文件流並沒有被關閉，且深處其中。

（2）.此時並不會呼叫document.open方法建立一個新的文件流，否則就是多次一舉。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>      
<html>      
<head>      
<meta charset=" utf-8">      
<meta name="author" content="http://www.softwhy.com/" />      
<title>螞蟻部落</title>     
<script>
document.close(); 
document.write("www.softwhy.com");
</script> 
</head>  
<body>  
<div>螞蟻部落</div>
</body>  
</html>

上面程式碼的初衷是，呼叫document.close方法關閉文件流。

然後再呼叫document.write方法寫入新的內容，由於會隱式呼叫document.open方法，所以原來頁面的內容會被覆蓋清空，然而頁面效果並未符合預期，原因分析如下：

（1）.方法處於文件流中，且此文件流是由瀏覽器建立。

（2）.document.close方法沒有許可權關閉由瀏覽器建立的文件流。

再來演示一段程式碼例項，加深理解：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>       
<html>       
<head>       
<meta charset=" utf-8">       
<meta name="author" content="http://www.softwhy.com/" />       
<title>螞蟻部落</title>      
<script>   
function done(){  
  let newW=window.open("","螞蟻部落","_blank");  
  newW.document.write("antzone");  
  newW.document.close();  
  newW.document.write("softwhy"); 
}  
window.onload=function(){  
  let obt=document.getElementById("bt");  
  obt.onclick=function(){  
    done();  
  }  
}  
</script>  
</head>   
<body>   
<div>本站url地址是www.softwhy.com</div>  
<input type="button" id="bt" value="檢視效果"/>  
</body>   
</html>

程式碼分析如下：

（1）.點選按鈕後會執行事件處理函式，進而呼叫done函式。

（2）.再通過window.open方法建立一個新的視窗，然後利用document.write方法在頁面中寫入"antzone"。

（3）.再使用document.close方法關閉此文件流，此方法可以關閉通過window.open建立的文件。

（4）.最後document.write方法隱式呼叫document.open方法建立一個新的文件流，然後寫入"softwhy"。

相關文章