以前一直以为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. 源码解读—HashTable

    在上一篇学习过HashMap(源码解读—HashMap)之后对hashTable也产生了兴趣,随即便把hashTable的源码看了一下.和hashMap类似,但是也有不同之处. public clas ...

  2. 抽象类和抽象方法（关键字abstract）

     1.抽象类不能被实例化,可以没有,一个或多个抽象方法  2.抽象方法只有方法的声明但没有方法的实现,有抽象方法的类必须声明为抽象类,子类必须重写父类所有的抽象方法才能被实例化,否则子类也是个抽象类, ...

  3. Android Studio JNI/NDK 编程简介（一）

    首先说一下概念及相关的东西: JNI : JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++).从Java1.1开始 ...

  4. springmvc常用注解与类型转换

    springmvc常用注解与类型转换 一:前置 spring -servlet.xml 注入 <!-- 启用spring mvc 注解 --> <context:annotation ...

  5. 2016-06-08：Windows中的bat脚本

    涉及循环嵌套,启用变量延时,算术运算 @echo off setlocal enabledelayedexpansion %路径以及文件名等变量设置% set x264_exe=E:\demo\c++ ...

  6. NUGET命令

    主题 about_NuGet 简短说明 提供有关 NuGet 程序包管理器命令的信息. 详细说明 本主题介绍 NuGet 程序包管理器命令.NuGet 是一种集成的程序包 管理工具,用于将库和工具添加 ...

  7. ESL python调用C模块时传递unicode字符串报错问题解决

    在是用freeswitch时利用ESL的python调用时传递字符串报错 TypeError: in method 'ESLconnection_api', argument 2 of type 'c ...

  8. List集合转换为数组形式

    通过List集合对象的转类型函数 .ToArray() 如List<decimal> → deciaml[] 代码如下: var ComIdList = ComList.Select(p ...

  9. JQuery之正则表达式

    1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 2.匹配正则表达式 非全局模式,不分组 var patte ...

  10. 第九十七天请假 PHP TP框架 MVC模式

    MVC : M->Model 模型(数据层)     V->View 视图(视图层)  C->Controller 控制器(逻辑层)            M : 操作数据(连接数据 ...