为什么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. tomcat Linux安装

    tomcat依赖jdk软件包,所以先配置jdk. 配置完成后 将下载好的tomcat 解压至/usr/local tar -xvf apache-tomcat-7.0.70.tar.gz -C /us ...

  2. 【转】使用母版页时内容页如何使用css和javascript

    源地址:https://www.cnblogs.com/accumulater/p/6767138.html

  3. 剑指offer —— 二维数组的查找

    1.问题:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 2.思路:只看题目本身 ...

  4. kuangbin专题十六 KMP&&扩展KMP HDU2087 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和小 ...

  5. [Shell]Shell学习笔记之for

    关于shell中的for循环用法很多,一直想总结一下,今天网上看到上一篇关于for循环用法的总结,感觉很全面,所以就转过来研究研究,嘿嘿…1. for((i=1;i<=10;i++));do e ...

  6. sharepoint_study_8

    描述:如何删除webPart无效文件? 图示: 有时候webpart的部署包虽然删除了,但是它的文件依然会留在这个类别中,怎样删除这些无效的文件呢? 解决: 在网站设置中打开web部件,里面列出了网站 ...

  7. sharepoint_study_7

    描述:sharepoint网站上部署WebPart出错后,如何删除错误的WebPart?如何恢复原页面? 解决:到管理中心去将该解决方案收回并删除,可以恢复原页面,但是错误的webpart信息会保留, ...

  8. spoj COT - Count on a tree(主席树 +lca,树上第K大)

    您将获得一个包含N个节点的树.树节点的编号从1到Ñ.每个节点都有一个整数权重. 我们会要求您执行以下操作: uvk:询问从节点u到节点v的路径上的第k个最小权重 输入 在第一行中有两个整数Ñ和中号.( ...

  9. python3 关键字和可变参数笔记

    """普及一下字典的知识""" # dict = {'Name': 'Runoob', 'Age': 7, 'Class': 'First' ...

  10. Linux忘记roo密码的解决办法

    Linux忘记root密码有三种解决办法: 下面详细介绍第一种: 重启系统后出现GRUB界面在引导装载程序菜单上,用上下方向键选择你忘记密码的那个系统键入“e” 来进入编辑模式.   接下来你可以看到 ...