document.write() 爲何會清空頁面

時間 2019-11-26

標籤 document.write document write 爲何清空頁面简体版

原文原文鏈接

好久之前遇到的問題,放着放着就忘記去研究了
最近看到一篇文章總結一下
做者: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)url

 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()是成功的(並不會覆蓋),但就覆蓋(或清空)了前面的文檔spa

其實在執行window.onload以前.瀏覽器了建立文檔流 ---> 而後這時候再執行window.onload函數,
而執行document.write()函數會自動調用document.open()函數,建立一個新的文檔流,寫入新的內容,就會覆蓋原來的內容
,
借用做者的原話:window.onload事件是在文檔內容徹底加載完畢再去執行事件處理函數，固然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動調用document.open()函數建立一個新的文檔流，並寫入新的內容，再經過瀏覽器展示，這樣就會覆蓋原來的內容.net

再看看一段代碼實例(代碼3)
code

 1 <body>
 2 <div>hello world</div>
 3 
 4 <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對象

驗證瀏覽器建立文檔流可否關閉blog

就把第一段代碼加上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>

輸出的依然是ip

借用做者的原話:很遺憾，文檔流是由瀏覽器建立，無權限手動關閉，並document.close()函數只可以關閉由document.open()函數建立的文檔流

最後一個問題,window.onload執行爲何就能關閉
這是由於文檔document對象改變爲window對象在新做用域下

在代碼3也能夠看出來

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。