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

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

  1.  <body>
  2.  <div>hello world</div>
  3.  
  4.  <script>
  5.      document.write();
  6.      document.write();
  7.  </script>
  8.  </body>

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

  1.  <body>
  2.  <div>hello world</div>
  3.  
  4.  <script>
  5.      window.onload = function(){
  6.          document.write();
  7.          document.write();
  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();
  7.          document.close();
  8.          document.write();
  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();
  7.      document.write();
  8.  </script>
  9.  </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. Flink入门（三）——环境与部署

    flink是一款开源的大数据流式处理框架,他可以同时批处理和流处理,具有容错性.高吞吐.低延迟等优势,本文简述flink在windows和linux中安装步骤,和示例程序的运行,包括本地调试环境,集群 ...

  2. sticker-footer布局

    目录 1.嵌套层级不深,可直接继承自 body width:100%: height:100%; 2.嵌套层级很深,无法直接从上级继承 百分比高度的 第一种方法:给需要的 sticker-footer ...

  3. io流函数略解(java_input流)[二]

    背景 在写这篇随笔之前,已经写了io流函数略解(java_File)(一),主要是总结了File的一些操作,以及一些源码介绍. 在Io实际应用中,实际上运用在如果会操作File,实际上很难写出一点能实 ...

  4. Java 将Excel转为图片、html、XPS、XML、CSV

    通过文档格式转换,可满足不同办公场合对文档操作的需求.本文将介绍转换Excel文档为其他常见文档格式的方法.通过文中的方法,可支持将Excel转换为包括PDF.图片.html.XPS.XML.CSV. ...

  5. idea 上传svn忽略文件

    在idea最下面找到Version Control 默认我们svn提交的文件都在Default ChangeList中 我们创建一个新的ChangeList

  6. [vue]初探生命周期

    Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 一.创建/销毁,缓存 1.cre ...

  7. JSP注册登录页教程

    转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html  一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章< ...

  8. 你不知道的JavaScript（中）读书笔记（二）

    第三章 原生函数 常用的原生函数(内建函数)有: String() Number() Boolean Array() Object() Function() RegExp() Date() Erroe ...

  9. Django聚合查询 orm字段及属性

    目录 一 聚合查询 1. 级联 级联删除 级联更新 2. 聚合函数 使用 aggregate 使用场景 3. 分组查询 语法 使用 annotate 代码 4. F与Q查询 F查询 Q查询 二 ORM ...

  10. 第二次作业-titanic数据集练习

    一.读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗. titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活Pclass:乘客所持票类,有三种值(1, ...