document.write() 為什麽會清空頁面
阿新 • • 發佈：2017-12-12
alt str details body 瀏覽器 覆蓋 nload 遇到 加載
而執行document.write()函數會自動調用document.open()函數,創建一個新的文檔流,寫入新的內容,就會覆蓋原來的內容
,
借用作者的原話:window.onload事件是在文檔內容完全加載完畢再去執行事件處理函數，當然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動調用document.open()函數創建一個新的文檔流，並寫入新的內容，再通過瀏覽器展現，這樣就會覆蓋原來的內容
很久以前遇到的問題,放著放著就忘記去研究了
最近看到一篇文章總結一下
作者:abloume
url: http://blog.csdn.net/u013451157/article/details/78699253
先來一段代碼實例:(代碼1)
1 <body> 2 <div>hello world</div> 3 4 <script> 5 document.write(111); 6 document.write(222); 7 </script> 8 </body>
再來一段代碼做比較(代碼2)
1 <body> 2<div>hello world</div> 3 4 <script> 5 window.onload = function(){ 6 document.write(111); 7 document.write(222); 8 } 9 </script> 10 </body>
很明顯看到問題,在window.onload後,為什麽2次執行document.write()是成功的(並不會覆蓋),但就覆蓋(或清空)了前面的文檔
其實在執行window.onload之前.瀏覽器了創建文檔流
而執行document.write()函數會自動調用document.open()函數,創建一個新的文檔流,寫入新的內容,就會覆蓋原來的內容
,
借用作者的原話:window.onload事件是在文檔內容完全加載完畢再去執行事件處理函數，當然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動調用document.open()函數創建一個新的文檔流，並寫入新的內容，再通過瀏覽器展現，這樣就會覆蓋原來的內容
再看看一段代碼實例(代碼3)
1 <body> 2 <div>hello world</div> 34 <script> 5 window.onload = function(){ 6 document.write(111); 7 document.close(); 8 document.write(222); 9 } 10 </script> 11 </body>
這裏就非常明顯了,如果document.close()函數執行關閉,document.write()函數是執行了一次document.open()
所以只輸出222
驗證瀏覽器創建文檔流能否關閉
就把第一段代碼加上document.close()函數
1 <body> 2 <div>hello world</div> 3 4 <script> 5 document.close(); 6 document.write(111); 7 document.write(222); 8 </script> 9 </body>
輸出的依然是
借用作者的原話:很遺憾，文檔流是由瀏覽器創建，無權限手動關閉，並document.close()函數只能夠關閉由document.open()函數創建的文檔流
最後一個問題,window.onload執行為什麽就能關閉
這是因為文檔document對象改變為window對象在新作用域下
在代碼3也可以看出來
document.write() 為什麽會清空頁面