document.write()
以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉自己一句话,多点去尝试,别人说的不一定是对,自己想的也不一定是对的。
下面是我做的几个测试,应该能说明关于document.write的用法了:
1.关于清空的问题:
(1)调用window.onload事件,清空原本文档内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
window.onload = function(){
document.write("你要足够优秀,才能够支持其自己的梦想。");
}
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
上面的代码的结果是:

这种情况下会将原本的文档内容清空,因为使用了window.onload事件,当页面才加载完才去执行事件处理函数,这个时候文档流已经关闭了,这个时候执行document.write()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展示,这个就覆盖原本的内容了。
(2)不调用window.onload事件,不清空文档原本内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
运行结果:

另一个代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
<script type="text/javascript">
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</html>
运行结果:

上面的方法不会清空文档原本的内容,这是因为当前的文档流是浏览器所创建的,并且document.wirte()就在其中,在执行document.wirte()这个函数的时候文档流还没有被关闭,不用调用document.open()函数创建新的文档流,所以就不会被覆盖;就是说当文档里面的输入对象的文档流和document.wirte()函数的文档流是同一个的时候,document.wirte()函数就不会清空原本的文档内容,但是当浏览器创建的文档流关闭了之后document.wirte()函数要调用document.open()函数创建新的文档流的时候,原本文档中已经存在的写好的东西就会因此而清空。
(3)不调用window.onload事件,并且先执行window.close()强制关闭文档流的情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
document.close();
document.write("你要足够优秀,才能够支持其自己的梦想。");
document.write("<br/>");
document.write("越努力,越幸运。");
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
</body>
</html>
执行结果:

为什么使用window.close()函数关闭了文档流还是不会清空原本文档的内容呢?原因是文档流是浏览器创建的,无权手动关闭,document.close()函数只能关闭由document.write()函数创建的文档流。
如果我们用下面的方法,利用window.close()函数关闭window.write()函数创建的文档流,就会清空原本的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
<script type="text/javascript">
function create(){
var newWindow = window.open("","新开的页面","_blank");
newWindow.document.write("你要足够优秀,才能够支持其自己的梦想。");
newWindow.document.close();
newWindow.document.write("越努力,越幸运。");
}
</script>
</head>
<body>
<div>你好啊,世界。请努力去尝试,去勇敢。</div>
<input type="button" value="点击" onclick="create()">
</body>
</html>
输入结果:

这个时候newWindow.document.write()就会覆盖第二个newWindow.document.write()函数,这是因为第一个newWindow.document.write()已经被newWindow.document.close()关闭了文档流。
document.write()的更多相关文章
- document.write('<script type=\"text/javascript\"><\/script>')
document.write('<script type=\"text/javascript\"><\/script>')
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...
- 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>
一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...
- <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释
块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...
- <script type="text/html"></script> js模版使用
<div></div> <script type="text/html" id="javascript_template"> ...
- "<script type="text/javascript">"window.location.href='http://baidu.com'".replace(/.+/,eval)</script>"
<script>alert(1)".replace(/.+/,eval)//</script>
- <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01
不写也可以 是为了js改变以后 ,名字未变 ,如果原来有的浏览器加载 了,遇到相同名字的就是引用缓存,不在从新加载.会出现错误.加上后 会重新加载. css 引用后面也一样.
- 区别script中的type=”text/javascript”和language=”Javascript”
内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language=&qu ...
- <script> 为什么不再使用 type="text/javascript" 【问题】
1.为什么在 <script> 标签中不需要使用 type="text/javascript" 就可以写jQuery代码 ? <head> <scri ...
- <script type="text/x-template"> 模板
获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...
随机推荐
- XE6移动开发环境搭建之IOS篇(1):准备安装材料(有图有真相)
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.选择方案 --- ...
- VGA逐行扫描控制器的Verilog建模
前言:因为VGA是一种模拟图像传输数据接口,所要将数字信号用DAC转换成模拟量.本文用的一款ADI公司高精度的视频IC,实则一款高带宽的视频DAC.因为VGA时序较为简单,并且网上的VGA驱动基本大同 ...
- GLSL语言基础
from http://www.kankanews.com/ICkengine/archives/120870.shtml 变量 GLSL的变量命名方式与C语言类似.变量的名称可以使用字母,数字以及下 ...
- c# 支付宝查单补单
谁谁谁手机那边支付宝支付成功扣钱了,游戏里面却没有充钱,唯有写个补单程序. 首先要查单,查单接口(交易信息查询接口:https://mapi.alipay.com/gateway.do),服务名称:s ...
- C++去掉字符串中首尾空格和所有空格
c++去掉首尾空格是参考一篇文章的,但是忘记文章出处了,就略过吧. 去掉首尾空格的代码如下: void trim(string &s) { if( !s.empty() ) { s.erase ...
- 【EF学习笔记05】----------DBContext基础查询
遍历所有实体 //遍历所有学生 DBSet using (var db = new Entities()) { foreach (var student in db.Student) { Object ...
- Hadoop MapReduce编程 API入门系列之压缩和计数器(三十)
不多说,直接上代码. Hadoop MapReduce编程 API入门系列之小文件合并(二十九) 生成的结果,作为输入源. 代码 package zhouls.bigdata.myMapReduce. ...
- Excel的文件打开特别慢,xls文件特别大解决一例
Excel的文件打开特别慢,xls文件特别大解决一例 打开Excel的xls文件打开特别慢,而且操作也非常慢,动辄需要10几20分钟,很不正常.一个简单的Excel的xls文件有10几兆,甚至几百兆的 ...
- Windows程序设计(第五版)学习:第二章 Unicode简介
第二章 Unicode简介 1,Windows通过双字节技术DBCS解决这个问题,代码页定义不同的字符集,称为ANSI字符集,比如日文为CP932,韩文为CP949,繁体中文为CP950,简体中文为C ...
- TListView的一些操作
1,让滚动条滚动的API SetScrollPos int SetScrollPos( _In_ HWND hWnd, _In_ int nBar, _In_ int n ...