以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉自己一句话,多点去尝试,别人说的不一定是对,自己想的也不一定是对的。

  下面是我做的几个测试,应该能说明关于document.write的用法了:

  1.关于清空的问题:

  (1)调用window.onload事件,清空原本文档内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        window.onload = function(){
          document.write("你要足够优秀,才能够支持其自己的梦想。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  上面的代码的结果是:

  

  这种情况下会将原本的文档内容清空,因为使用了window.onload事件,当页面才加载完才去执行事件处理函数,这个时候文档流已经关闭了,这个时候执行document.write()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展示,这个就覆盖原本的内容了。

  (2)不调用window.onload事件,不清空文档原本内容:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  运行结果:

  

  另一个代码:

  <!DOCTYPE html>

   <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
     <script type="text/javascript">
      document.write("你要足够优秀,才能够支持其自己的梦想。");
      document.write("<br/>");
      document.write("越努力,越幸运。");
    </script>
  </html>

  运行结果:

  

  上面的方法不会清空文档原本的内容,这是因为当前的文档流是浏览器所创建的,并且document.wirte()就在其中,在执行document.wirte()这个函数的时候文档流还没有被关闭,不用调用document.open()函数创建新的文档流,所以就不会被覆盖;就是说当文档里面的输入对象的文档流和document.wirte()函数的文档流是同一个的时候,document.wirte()函数就不会清空原本的文档内容,但是当浏览器创建的文档流关闭了之后document.wirte()函数要调用document.open()函数创建新的文档流的时候,原本文档中已经存在的写好的东西就会因此而清空。

  (3)不调用window.onload事件,并且先执行window.close()强制关闭文档流的情况:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.close();
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  执行结果:

  

  为什么使用window.close()函数关闭了文档流还是不会清空原本文档的内容呢?原因是文档流是浏览器创建的,无权手动关闭,document.close()函数只能关闭由document.write()函数创建的文档流。

  如果我们用下面的方法,利用window.close()函数关闭window.write()函数创建的文档流,就会清空原本的内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        function create(){
          var newWindow = window.open("","新开的页面","_blank");
          newWindow.document.write("你要足够优秀,才能够支持其自己的梦想。");
          newWindow.document.close();
          newWindow.document.write("越努力,越幸运。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
      <input type="button" value="点击" onclick="create()">
    </body>
  </html>

  输入结果:

  

  这个时候newWindow.document.write()就会覆盖第二个newWindow.document.write()函数,这是因为第一个newWindow.document.write()已经被newWindow.document.close()关闭了文档流。

document.write()的更多相关文章

  1. document.write('<script type=\"text/javascript\"><\/script>')

    document.write('<script type=\"text/javascript\"><\/script>')

  2. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  3. 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>

    一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...

  4. <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释

    块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...

  5. <script type="text/html"></script> js模版使用

    <div></div> <script type="text/html" id="javascript_template"> ...

  6. "<script type="text/javascript">"window.location.href='http://baidu.com'".replace(/.+/,eval)</script>"

    <script>alert(1)".replace(/.+/,eval)//</script>

  7. <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01

    不写也可以 是为了js改变以后 ,名字未变 ,如果原来有的浏览器加载 了,遇到相同名字的就是引用缓存,不在从新加载.会出现错误.加上后 会重新加载. css 引用后面也一样.

  8. 区别script中的type=”text/javascript”和language=”Javascript”

    内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language=&qu ...

  9. <script> 为什么不再使用 type="text/javascript" 【问题】

    1.为什么在 <script> 标签中不需要使用 type="text/javascript" 就可以写jQuery代码 ? <head> <scri ...

  10. <script type="text/x-template"> 模板

    获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...

随机推荐

  1. Blackfin DSP(六):BF533的SPORT接口

    1.特性 bf533有两个SPORT口(synchronous serial Port),即同步串行接口.完全独立的接收和发送通道,且每个通道都具有缓冲,最高速度可达SCLK/2.最大支持32bit字 ...

  2. 实习日记:图像检索算法 LSH 的总结与分析(matlab)

    最开始仿真和精度测试,基于 matlab 完成的. Demo_MakeTable.m (生成 Hash 表) %======================================== %** ...

  3. React 附件动画API ReactCSSTransitionGroup

    React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...

  4. 配置VS使用winteracter

    一.winteracter是什么?为什么要用VS代替wide?winteracter 是一款强大的 Fortran 图形界面函数库,可方便的用 Fortran 生成GUI界面,对话框,菜单,绘图等操作 ...

  5. Egret 摇一摇功能

    一  什么是重力感应 二 什么是陀螺仪 三 Egret中的摇一摇是利用什么原理实现的 四 摇一摇代码 一 什么是重力感应 二 什么是陀螺仪 三 Egret中的摇一摇是利用什么原理实现的 大概是利用手机 ...

  6. php关闭错误提示

    今天调试phalcon的一个接口时候碰到如下提示: Deprecated: mongogo::mongogo(): The Mongo class is deprecated, please use ...

  7. 关于c#中的console用法大全

    C#之Console   Console.Write  表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine  表示向控制台写入字符串后换行.Conso ...

  8. 面向服务体系架构(SOA)和数据仓库(DW)的思考基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台

    面向服务体系架构(SOA)和数据仓库(DW)的思考 基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台 当前业界对面向服务体系架构(SOA)和数据仓库(Data Warehouse, ...

  9. 数据库数据怎样导出成Excle表格或Word文档?

    数据导出:将数据库的数据导出成Excel工作表或Word文档 方法:将一个泛型集合导出出去 主要使用: SaveFileDialog StreamWriter 导出代码: private void b ...

  10. xcode archive 一直是灰色的

    把配置选择为device才能选build and archive的,模拟器的肯定不能build and anchive