为什么document.write()会清空原来的内容:

可能很多朋友都遇到过这样的情况，那就是使用document.write()函数向网页中写内容的时候，会把文档中的原来的内容给清空，这一点对于初学者来说算是一个困扰，下面就介绍一下为什么会出现这种情况，当然也就知道如何避免此种情况的发生了。
先看一段代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<script type="text/javascript">

window.onload=function(){

document.write("分享互助");

}

</script>

</head>

<body>

<div>蚂蚁部落欢迎您</div>

</body>

</html>

从以上代码的可以看出document.write()函数将原来的文档内容清空了，下面介绍一下出现此种情况的原因:
window.onload事件是在文档内容完全加载完毕再去执行事件处理函数，当然文档流已经关闭了，这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。不过很多朋友还有会这样的疑问，为什么类似下面的情况，原来网页中的内容不会被覆盖,代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<script type="text/javascript">

document.write("分享互助");

</script>

</head>

<body>

<div>蚂蚁部落欢迎您</div>

</body>

</html>

在以上代码中，原来的文档内容并没有被清空，这是因为当前文档流是由浏览器所创建，并且document.wirte()函数身处其中，也就是执行此函数的时候文档流并没有被关闭，这个时候不会调用document.open()函数创建新文档流，所以也就不会被覆盖了。可能还有朋友会问为什么下面的方式还是不行，代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<script type="text/javascript">

document.close();

document.write("分享互助");

</script>

</head>

<body>

<div>蚂蚁部落欢迎您</div>

</body>

</html>

上面使用document.close()关闭文档流了，为什么还是不能够覆盖原来的内容的，很遗憾，文档流是由浏览器创建，无权限手动关闭，document.close()函数只能够关闭由document.open()函数创建的文档流。看下面的代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<script type="text/javascript">

function create(){

var newWindow=window.open("","蚂蚁部落","_blank");

newWindow.document.write("蚂蚁部落欢迎您");

newWindow.document.close();

newWindow.document.write("ABC");

}

window.onload=function(){

var obt=document.getElementById("bt");

obt.onclick=function(){

create();

}

}

</script>

</head>

<body>

<div id="print">蚂蚁部落欢迎您，只有努力奋斗才会有美好的明天。</div>

<input type="button" id="bt" value="查看效果"/>

</body>

</html>

以上代码中，有doucment.open()创建的文档流就可以由document.close()函数关闭，那么第二个document.write()输出的内容会覆盖掉第一个输出的内容。

摘自：http://www.softwhy.com/forum.php?mod=viewthread&tid=13582

为什么document.write()会清空原来的内容的更多相关文章

  1. 关于xml加载提示: Error on line 1 of document : 前言中不允许有内容

    我是在java中做的相关测试, 首先粘贴下报错: 读取xml配置文件:xmls\property.xml org.dom4j.DocumentException: Error on line 1 of ...

  2. vim 快捷键 清空文件所有内容

    vim清空文件所有内容 在使用vim编辑器的时候,有时候编辑一个文件,而文件内容比较多,如果需要快速清空整个文件,可以使用一下命令: 在命令模式下,首先执行 gg 这里是跳至文件首行 再执行: dG ...

  3. JavaScript-2.2 document.write 输出到页面的内容

    <html> <head> <meta http-equiv="content-type" content="text/html;chars ...

  4. linux清空日志文件内容 (转)

    随着系统运行时间越来越长,日志文件的大小也会随之变得越来越大.如果长期让这些历史日志保存在系统中,将会占用大量的磁盘空间.用户可以直接把这些日志文件删除,但删除日志文件可能会造成一些意想不到的后果.为 ...

  5. 在线清空nohup.out内容

    通过 cat /dev/null > filename 命令可以在线清空nohup.out里的内容

  6. java文件相关（文件追加内容、文件内容清空、文件内容读取）

    https://blog.csdn.net/xnz0616/article/details/39137177 1.文件内容追加 // 在已有的文件后面追加信息 public static void a ...

  7. 清空iframe的内容

    document.getElementById("web").contentWindow.document.body.innerText = "";

  8. linux下清空文件全部内容，如log日志

    在实际操作中经常需要清空log文件, 比如a.log,   有的人说, 直接删除不就行了, 但是, 直接删除后, 没法使用tail -f a.log了. 有的人说, 先rm再touch一个新文件不就可 ...

  9. jquery 清空 iframe 的内容，，iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

随机推荐

  1. Android源码、内核编译

    Android源码和内核的编译就是一场马拉松,每一个节点都耗时漫长,下载源码.编译源码.下载内核.编译内核,下载中途会断掉,编译中间会失败,求解再重来,又是一轮马拉松,于是每一步都要做好备份和记录,可 ...

  2. addEntriesFromDictionary用法

    1.addEntriesFromDictionary在字典中的用法: NSMutableDictionary *dic1 = [NSMutableDictionary dictionaryWithOb ...

  3. Generic detail view PostDetailView must be called with either an object pk or a slug.解决

    Django 使用DetailView有这个问题,url,和模板统一调用模型时,用pk,而不是id 如果不是用DetailView,只是简单的视图,则用pk 或者id都可以. urls.py: url ...

  4. P4177 [CEOI2008]order 最小割

    \(\color{#0066ff}{ 题目描述 }\) 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给 ...

  5. 换根DP+树的直径【洛谷P3761】 [TJOI2017]城市

    P3761 [TJOI2017]城市 题目描述 从加里敦大学城市规划专业毕业的小明来到了一个地区城市规划局工作.这个地区一共有ri座城市,<-1条高速公路,保证了任意两运城市之间都可以通过高速公 ...

  6. 谁能赢呢？ BZOJ 2463

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  7. virturalenv 虚拟环境

    一.window系统 1.virtualenv的使用 2.pycharm使用 环境变量,path的作用:命令行中执行的命令,他们的路径,必须在path路径中,如果命令行找不到该命令,就是说path没写 ...

  8. C语言中变量、全局变量与变量的作用域

    什么是变量: 变量常量都是表征数据的一种形式:常量用来表示数据的值: 变量不仅可以用来表示数据的值:还可以用来存放数据:因为变量对应着一定的内存单元: 变量和常量必须先定义后使用. 变量名和常量名都是 ...

  9. codeforces-473D Mahmoud and Ehab and another array construction task （素数筛法+贪心）

    题目传送门 题目大意:先提供一个数组,让你造一个数组,这个数组的要求是 1 各元素之间都互质  2  字典序大于等于原数组  3 每一个元素都大于2 思路: 1.两个数互质的意思就是没有公因子.所以每 ...

  10. 衡量DevOps成功的15个标准

    DevOps在你的组织中运行的如何?如果你需要帮忙衡量它运行的如何,我们准备了一些DevOps的关键指标来进行追踪.这些指标可以帮助理解你的团队过去做的如何. 定义DevOps对你的组织意味着什么 D ...