为什么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. UITouch

    触摸事件基本都是发生在 viewController 中,首先触摸的对象是视图,而视图的类 UIView 继承了 UIRespnder 类,但是要对事件作出处理,还需要重写 UIResponder 类 ...

  2. git commit失败

    1.使用命令  git rm test.txt 删除版本库中文件, 下一步:git commit 提交 出现如图: 这是因为没有同时提交信息,即:git commit -m "这里是信息&q ...

  3. Java之批处理的实现

    批处理(batch) 一.批处理介绍 1. 批处理指的是一次操作中执行多条SQL语句 2. 批处理相比于一次一次执行效率会提高很多 3. 批处理主要是分两步: 1.将要执行的SQL语句保存 2.执行S ...

  4. [USACO08MAR]跨河River Crossing dp

    题目描述 Farmer John is herding his N cows (1 <= N <= 2,500) across the expanses of his farm when ...

  5. springloud系列搭建注册中心

    首先搭建父工程: 点击next父工程就搭建完成; pom.xml文件: <?xml version="1.0" encoding="UTF-8"?> ...

  6. Qt 学习之路 2（11）：布局管理器

    Home / Qt 学习之路 2 / Qt 学习之路 2(11):布局管理器 Qt 学习之路 2(11):布局管理器  豆子  2012年9月4日  Qt 学习之路 2  70条评论 所谓 GUI 界 ...

  7. VC对话框的菜单设置变灰， 打勾 等

    一般可以用UPDATE_COMMAND_UI消息,并加入以下代码:pCmdUI->Enable(FALSE); 就实现,弹对话框的菜单需要增加对WM_INITMENUPOPUP消息的处理以后,才 ...

  8. 理解Javascript_01_理解内存分配

    理解Javascript_01_理解内存分配 转载自:http://www.cnblogs.com/fool/archive/2010/10/07/1845226.html   在正式开始之前,我想先 ...

  9. C语言中typedef的解释_1

    typedef是在计算机编程语言中用来为复杂的声明定义简单的别名,它与宏定义有些差异. 它本身是一种存储类的关键字,与auto.extern.mutable.static.register等关键字不能 ...

  10. ListItemType.AlternatingItem 和 ListItemType.Item

    项目中后台绑定Reapter项时,判断 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.Alte ...