今天碰到了一个以前没注意的问题即：document.write()，在此拿来分享！

document.write是最基本的JavaScript命令之一，这个命令简单地打印指定的文本内容到页面上（注意是页面，所以想用write指定具体打印到哪个地方的同学可以心凉了）。

使用这个方法会碰到两个状态：1、添加内容到页面中；2、重写页面；为什么出两种状态？

页面在生成时有一个输入流的状态。在页面加载时这个状态是自动打开的，这时内容会从上至下添加内容。

此时调用document.write会把内容写进页面里面，但我们不能准确控制加载的位置，只能根据write()方法调用的位置使其内容放入页面大概的位置。

例如：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <script type="text/javascript">

         document.write("我是输出内容！");

     </script>

     <h1>我是HTML标签内容！</h1>

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <h1>我是HTML标签内容！</h1>

     <script type="text/javascript">

         document.write("我是输出内容！");

     </script>

 </body>

 </html>

而当页面加载完成后即window.onload后，会自动的运行document.close()方法关闭这个输入流，如果此时我们再运行document.write会打开一个新的输入流在页面，此时会重写页面。

（注意：重写的是body里面的内容）

所以，如果想添加内容，还是用innnerHTML吧；

当然如果想重写页面，在window.onload后调用document.write就行了，但要记得在写完后调用close()方法关闭输入流，不关闭的话据说会阻挡图片的显示，但我没测试。

欢迎批评指正，有更好的想法多多交流~

关于document.write()重写页面的更多相关文章

  1. document.write()重写问题

    document.write(); 可用于重写给某个元素追加内容; 当document.write(); 用于JS文件中,会重写整个页面,解决这个问题有多种方法. 重写原因:当onload的时候执行 ...

  2. 使用 document.onreadystatechange()来判断页面加载完

    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() {  if(docum ...

  3. document.onreadystatechange()来判断页面加载完

    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() {  if(docum ...

  4. js重写页面之后后台如何获取重写后的控件值

    需求描述:专业分流系统中,学生在选择志愿时,我想实现在页面按照点击相应专业的顺序来设置选专业的志愿,如首先点击“工商”,则工商专业为第一志愿,接着点击“营销”,则营销专业为第二志愿,以此类推.从而达到 ...

  5. JavaScript-2.2 document.write 输出到页面的内容

    <html> <head> <meta http-equiv="content-type" content="text/html;chars ...

  6. document.readyState等属性，判断页面是否加载完

    如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState==& ...

  7. 【repost】document.write的用处

    document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中 ...

  8. 闲扯 『 document.write 』

    初春的晚上,闲来无事,聊聊 document.write 方法. document.write 使用方式非常简单,把 "字符串化"(不好意思,这可能是我自己创造的名词)的 html ...

  9. 关于document.write

    document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中 ...

随机推荐

  1. Proguard 保留native methods的问题

    发现一个奇怪的问题,如果使用下面的配置来keep的话,native的方法还是被删掉了,百思不得其解. -keepclasseswithmembers class * {     native *; } ...

  2. [总结]Map: C++ V.S. Java

    整理一下Map在Java 和 C++的基本操作,欢迎大家一起交流学习. 附: 对于在C++中,选用map 还是 unordered_map,可以参考这篇讨论.相对简单粗暴的结论是,unordered_ ...

  3. 关于svcutil.exe

    添加环境变量 name NETFX4 value C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin\NETFX 4.0 Tools Server.Pr ...

  4. sqlserver exists和in 与exists和not in

    1.exists 和 in 1.1 正常情况下exists和in的效果是一样的,如图试验 即使子查询中包含null也没有关系,依然可以正常使用 1.2 in 和 exists效率比较 先看in 由图中 ...

  5. npm install 本地安装与全局安装

    npm的包安装分为本地安装(local).全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已: npm install grunt # 本地安装 npm install -g gr ...

  6. 遍历ArrayList与LinkedList,使用FOR与迭代器的区别

    网上结论: 如果是链表结构的集合,如LinkedList,则使用迭代器遍历,速度会更快(顺序获取). 如果是数组结构的,如ArrayList,则使用for循环会更快(随机获取) 测试代码: packa ...

  7. Windows 8.1 正式版 MSDN第二版 官方简体中文/英文版 （专业版/企业版）

    说明:文件名cn开头的是简中版文件名en开头的是英文版文件名含x64的为64位版本文件名含x86的为32位版本文件名含enterprise的为企业版文件名含pro_vl的为专业批量授权版文件名不含en ...

  8. UML--核心元素之用例

    Use case 一个系统就是由各种各样的愿望组成的. 一个用例就是与参与者actor交互的,并且给参与者提供可观测的有意义的结果的一系列活动的集合. 例如你想做一顿饭吃,你需要完成煮饭和炒菜两件事情 ...

  9. Unix/Linux环境C编程入门教程(40) 初识文件操作

     1.函数介绍 close(关闭文件) 相关函数 open,fcntl,shutdown,unlink,fclose 表头文件 #include<unistd.h> 定义函数 int ...

  10. linux下awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...