document.open會打開一個新文檔,清除已加載的文檔;document.write在HTML加載後調用會導致open方法調用一次;document.close會關閉打開的文檔。
直接看代碼和效果圖:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>關於write</title>
</head>
<body>
<h1>HTML - 1</h1>
<script>
function doAsync(fun){
setTimeout(fun, 3000);
}
//調用document.open,清除當前文檔,但是需要HTML加載完成後有效
document.open();
//文檔加載未完成
//腳本阻塞HTML解析,write會向文檔流添加內容
document.write("<h1>這裏調用open、close無效 [文檔未加載完成]</h1>");
document.open();
document.close();
document.open();
document.close();
doAsync(()=>{
//文檔已加載
//調用document.write會導致document.open調用一次
//document.open會清除前文檔並開始一個新的文檔
document.write("<h1>文檔加載結束。調用open,清除原文檔</h1>");
document.write("<h1>這次沒調用open,保持追加</h1>");
//document.write方法不會導致document.close調用,需要手動調用
//document.close之後,如果再調用document.write,會導致document.open調用一次
document.close();
doAsync(()=>{
document.open();
document.write("<h1>這裏手動調用open,原文檔被清除</h1>");
//調用document.open會清除頁面,即便沒有close
document.open();
document.write("<h1>這裏手動調用open,原文檔被清除</h1>");
document.close();
});
});
</script>
<h1>HTML - 2</h1>
</body>
</html>