为什么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. [Algorithm]线性表

    一. 线性表基础算法 1.线性表插入操作 1 // 线性表插入操作(在第i(1≤i≤L.length+1)个位置上插入新元素elem) 2 bool InsertSeq( SeqList& L ...

  2. multiset的应用

    multiset 和set差不多 ,但是可以存储多个一样的元素

  3. iOS 上的相机捕捉 swift

    第一台 iPhone 问世就装有相机.在第一个 SKDs 版本中,在 app 里面整合相机的唯一方法就是使用 UIImagePickerController,但到了 iOS 4,发布了更灵活的 AVF ...

  4. 牛客寒假算法基础集训营4 G Applese 的毒气炸弹

    链接:https://ac.nowcoder.com/acm/contest/330/G来源:牛客网 众所周知,Applese 是个很强的选手,它的化学一定很好. 今天他又AK了一套题觉得很无聊,于是 ...

  5. PHP删除目录下的空目录

    function rm_empty_dir($path){       if(is_dir($path) && ($handle = opendir($path))!==false){ ...

  6. Unity 使用小技巧

    本文介绍我遇到过我Unity使用小技巧,有了这些技巧,项目做起来,溜得飞起 1.快速设置相机的位置 2.固定面板

  7. java 反射 处理 空值

    package org.zkdg.utils.spring.annotations.impl; import java.lang.annotation.Annotation; import java. ...

  8. CPU和微架构的概念

    CPU是什么: 中央处理器(CPU,Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心( Control Unit). 它的功能主要 ...

  9. P3172 [CQOI2015]选数（莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3172 [题解] https://www.luogu.org/blog/user29936/solutio ...

  10. uva11361 特殊数的数量（数位dp）

    题目传送门 题目大意:给你一个n-m的区间,问你这个闭区间内的特殊数有几个,特殊数的要求是 数的本身 和 各位数字之和  mod k 等于0. 思路:刚接触数位dp,看了网上的题解,说用dp[i][j ...