为什么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. sqlite3使用备忘

    执行sqlite3进入sqlite3环境: $ sqlite3 SQLite version -- :: Enter ".help" for usage hints. Connec ...

  2. Oracle SQL判断字符串是否在目标字符串中的函数

    转自:http://dacoolbaby.iteye.com/blog/1772156 根据需求,写了一段方法. 用于识别以下的情况: 判断 字符串A  在用逗号分隔的字符串B中是否存在 如: v_s ...

  3. [MOOC程序设计与算法二] 递归二

    1.表达式计算 输入为四则运算表达式,仅由整数.+.-.* ./ .(.) 组成,没有空格,要求求其值.假设运算符结果都是整数 ."/"结果也是整数 表达式也是递归的定义: 表达式 ...

  4. webpack4 入门（二）

    一.管理输出 1.多入口配置 entry: { index1: './src/index.js', index2: './src/index2.js' }, output: { filename: ' ...

  5. webpack4 入门（一）

    一.简介 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less, TypeScript等),并 ...

  6. oracle select非group by的字段

    可以把group by的结果集当作一个表,然后从这里表里取数就可以了. e.g. SELECT A.PROJECT_CODE,A.DIE_NO,E.ONE_CONSUMING FROM (SELECT ...

  7. uoj#119. 【UR #8】决战圆锥曲线（线段树+复杂度分析）

    题解 传送门 题解 然而要我来说我感觉只是个爆搜啊-- //minamoto #include<bits/stdc++.h> #define R register #define ll l ...

  8. js数据类型基础

    一.数据类型 数据类型包括:基本数据类型和引用数据类型 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还 ...

  9. c++ string.c_str()小结

    c++ const char *c_str(); c_str()函数返回一个指向正规C字符串的指针常量, 内容与本string串相同.(其实它指向的是string对象内部真正的char缓冲区),所以返 ...

  10. 【模板】文艺平衡树（Splay） 区间翻转 BZOJ 3223

    您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 N,M<= ...