很久以前遇到的问题,放着放着就忘记去研究了
最近看到一篇文章总结一下
作者:abloume
url:   http://blog.csdn.net/u013451157/article/details/78699253

先来一段代码实例:(代码1)

 <body>

 <div>hello world</div>

 <script>

     document.write();

     document.write();

 </script>

 </body>

再来一段代码做比较(代码2)

 <body>

 <div>hello world</div>

 <script>

     window.onload = function(){

         document.write();

         document.write();

     }

 </script>

 </body>

很明显看到问题,在window.onload后,为什么2次执行document.write()是成功的(并不会覆盖),但就覆盖(或清空)了前面的文档

其实在执行window.onload之前.浏览器了创建文档流 ---> 然后这时候再执行window.onload函数,
而执行document.write()函数会自动调用document.open()函数,创建一个新的文档流,写入新的内容,就会覆盖原来的内容
,
借用作者的原话:window.onload事件是在文档内容完全加载完毕再去执行事件处理函数，当然文档流已经关闭了，这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容

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

 <body>

 <div>hello world</div>

 <script>

     window.onload = function(){

         document.write();

         document.close();

         document.write();

     }

 </script>

 </body>

这里就非常明显了,如果document.close()函数执行关闭,document.write()函数是执行了一次document.open()
所以只输出222

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

就把第一段代码加上document.close()函数

 <body>

 <div>hello world</div>

 <script>

     document.close();

     document.write();

     document.write();

 </script>

 </body>

输出的依然是

借用作者的原话:很遗憾，文档流是由浏览器创建，无权限手动关闭，并document.close()函数只能够关闭由document.open()函数创建的文档流

最后一个问题,window.onload执行为什么就能关闭
这是因为文档document对象改变为window对象在新作用域下

在代码3也可以看出来

document.write() 为什么会清空页面的更多相关文章

  1. asp.net清空页面上的所有TextBox

    Asp.net中一次性清空页面上的所有TextBox中的内容,由于TextBox在客户端以<input type=”text”>形式来呈现的,因此解决方案有客户端和服务器端两种方式,服务器 ...

  2. 关于document.write()方法重绘页面问题

    学习的时候,document.write()被告知是用来将内容写进页面里面,同时也被告知document.write()方法会重绘页面,但是关于什么时候会重绘,什么时候不会重绘页面没有太多解释. 首先 ...

  3. 根据标记清空页面中所有的input对象

    function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input&quo ...

  4. jquery的 $(function(){ }) = $(document).ready(function(){ }) ，及页面的加载顺序

    document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...

  5. 利用document的readyState去实现页面加载中的效果

    打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...

  6. JS跨域调用之document.domain--相同基础域名页面之间的调用

    利用document.domain 实现跨域: 前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域 Javascript出于对 ...

  7. document对象操作：浏览器页面文件

    //找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span>& ...

  8. phonegap 清空页面缓存

    访问页面添加 <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV=& ...

  9. 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...

随机推荐

  1. MySql CPU彪高到百分之1000的排查思路

    You need to enable JavaScript to run this app.   原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等情况,可查看当前链接:https:// ...

  2. 如何利用 Open Live Writer 在本地发布WordPress博客文章

    [导读] Open Live Writer是由Windows Live WriterWriter更名而来,是由微软推出的一款能够免费使用的博客写作软件. Open Live Writer 可以支持大多 ...

  3. luogu P2650 弹幕考察

    题意简化:求某个区间在一组区间中覆盖的数量 对于这个问题,我们很容易想到线段树,或者树状数组,但是maxlongint不能让我们这么做 30分思路: 对于m个区间,枚举n个区间判断与它是否重合 但是O ...

  4. luogu P1327 数列排序

    题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入格式 第一行,正整数n (n<=10 ...

  5. AQS系列（二）- ReentrantLock的释放锁

    前言 在AQS系列(一)中我们一起看了ReentrantLock加锁的过程,今天我们看释放锁,看看老Lea那冷峻的思维是如何在代码中笔走龙蛇的. 正文 追踪unlock方法: public void ...

  6. mac 安装 XX-Net-3.12.11

    目录 一 下载xx-net稳定版 二 使用Chrome浏览器 三 开启IPv6 mac禁用SIP机制 SIP 步骤 其他 附完整的csrutil命令 一 下载xx-net稳定版 github稳定版-X ...

  7. MyBatis框架的基本配置

    MyBatis的基本配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE config ...

  8. golang包管理的古往今来

    https://golang.org/ before GO1.5-GOPATH 在GO1.5之前用GOPATH以及GOROOT这两个环境变量来决定包的位置. GOROOT就是告知当前go的安装位置,编 ...

  9. Typora常见的快捷方式

    操作类型 操作 快捷键 文件操作 新建 Ctrl + N    新建窗口 Ctrl + Shift + N    打开 Ctrl + O    快速打开 Ctrl + P    保存 Ctrl + S ...

  10. git输错用户名和密码报错

    最近在使用git clone命令操作时一直报错,报错消息如下: remote: Coding 提示: Authentication failed! 认证失败,请确认您输入了正确的账号密码 fatal: ...