码迷,mamicode.com
首页 > 其他好文 > 详细

document.write() 为什么会清空页面

时间:2017-12-11 23:09:24      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:自动   doc   成功   write   on()   class   open   问题   cme   

很久以前遇到的问题,放着放着就忘记去研究了
最近看到一篇文章总结一下
作者: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之前.浏览器了创建文档流 ---> 然后这时候再执行window.onload函数,
而执行document.write()函数会自动调用document.open()函数,创建一个新的文档流,写入新的内容,就会覆盖原来的内容
,
借用作者的原话:window.onload事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容

再看看一段代码实例(代码3)

 

 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

 验证浏览器创建文档流能否关闭

 就把第一段代码加上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() 为什么会清空页面

标签:自动   doc   成功   write   on()   class   open   问题   cme   

原文地址:http://www.cnblogs.com/me2o/p/8025236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!