一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。

document.write()方法可以用在两个方面：

1.页面载入过程中，用脚本加入新的页面内容。

2.用延时脚本创建本窗口或新窗口的内容。

该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。如下面代码，教务系统框架载入子页

 <!--将框架放入单元格中-->

 <span style="font-size:18px;">

     <td class="index-table-middle-center" valign="top" id="content-container">

         <div id="loading">

             //加载效果图标

             <img src="data:images/loading.gif" alt="loading" border="0" />

         </div>

         <script type="text/javascript">

             //调用JS的OutputIFrame函数，形成框架

             Index.OutputIframe();

         </script>

     </td>

 </span>
 <span style="font-size:18px;">//输出框架

     Index.OutputIframe = function () {

         var scrolling = $.isIE6 == true ? 'yes' : 'auto';

         document.write('<iframe id="content" width="100%" height="100%" class="hide" marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" onload="$(\'#loading\').hide();$(this).show();" src=""></iframe>');

     };

 </span>

在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个document.write()方法完成写操作。

关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。

为了演示document.write()方法，我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容，另—个向—个单独的窗口写内容。

示例1创建一个按钮，它为文档组合新的HTML内容，包括新文档标题的HTML标记和标记的颜色属性。

示例中有一个读者所不熟悉的操作符+＝，它把其右侧的字符串加到其左侧的变量中，这个变量用来存放字符串，这个操作符能很方便地把几个单独的语句组合成—个长字符串。使用组合在newContent变量中的内容document.write()语句可以把所有新内容写到文档中，完全清除示例1中的内容。

然后需要调用document.close()语句关闭输出流。当载入该文档并单击按钮时，可以注意到浏览器标题栏中的文档标题因此而改变。当回到原始文档并再次单击该按钮时，可以看到动态写入的第二个页面的载入速度甚至比重载原始文档还要快。

示例1 在当前窗口使用document.write()。

 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>  

 <script language="JavaScript">

   //重新写入函数

   function RepeatWrite(){

     // 保存写入的内容

     var newContent = "<html><head><title>A New Doc</title></head>"

     newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"

     newContent += "Click the Back button to see original document."

     newContent += "</body></html>"

     // 写入新的内容

     document.write(newContent);

     document.close();

   }  

 </script>

 </head>

 <body>

   <form>

     <!--单击按钮调用写入函数-->

     <input type="button" value="Replace Content" onClick="RepeatWrite()">

   </form>

 </body>

 </html>

示例2中，情况有点复杂，因为脚本创建了一个子窗口，整个脚本生成的文档都将写入该窗口中。为了使新窗口的引用在两个函数中保持激活状态，我们将newWindow变量声明为全局变量。

页面载入时，onLoad事件处理调用makeNewWindow()函数，该函数生成一个空的子窗口。另外，我们在window.open()方法的第三个参数中加入一个属性，使子窗口的状态栏可见。

页面上的按钮调用subWrite()方法，它执行的第一个任务是检查子窗口的closed属性。假如关闭了引用窗口，该属性（只在较新的浏览器版本中存在）返回true。如果是这种情况（假如用户手动关闭窗口），该函数再次调用makeNewWindow()函数来重新打开那个窗口。

窗口打开后，新的内容作为字符串变量组合在一起。与示例1一样，一次性写入内容（虽然对单独的窗口没有必要），接下来调用close()方法。但是注意一个重要的区别：write() 和 close()方法都明显地指定了子窗口。

 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>

 <script language="JavaScript">

   //生命一个全局变量

   var newWindow;

   //打开一个新的窗口

   function makeNewWindow(){

     newWindow = window.open("","","status,height=200,width=300")

   }

   //判断新窗口是否关闭，如果关闭重新打开

   function subWrite(){

     // make new window if someone has closed it

     if(newWindow.closed){

       makeNewWindow()

     }

     // 是新窗口获得焦点

     newWindow.focus()

     //保存写入内容

     var newContent = "<html><head><title>A New Doc</title></head>"

     newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"

     newContent += "</body></html>"

     // 将HTML代码写入新窗口中

     newWindow.document.write(newContent)

     newWindow.document.close()    // close layout stream

   }

 </script>

 </head>  

 <body onLoad="makeNewWindow()">

   <form>

     <input type="button" value="Write to Subwindow" onClick="subWrite()">

   </form>

 </body>

 </html>

总结:

　　最近在写一个静态资源加载器, 其中有用到document.write, 在经历过一翻折腾后, 发现document.write还是有点内容的,所以决定折腾点东西记录下,同时也算是给自己积累点东西.

关于我和document.write那点不得不说的事的更多相关文章

  1. 关于我的Android 博客

    我是曹新雨,我为自己代言.现在的菜鸟,3年以后我就是大神.为自己加油.微信:aycaoxinyu 关于我的Android博客,都是我当初遇到困难,克服之后,写上去的.后来,有人加我微信,问我一些问题, ...

  2. 关于我的OI生涯（AFO）｛NOIP2016 后｝

    这篇我就随意写啦~不用统一的“题解”形式.♪(^∀^●)ﾉ 也分好几次慢慢更吧~ 对于NOIP2016的总结,我本想善始善终back回,但是心情不足以支撑我,那就只能有始有终了......下面进入我的 ...

  3. 关于我和Github不得不说的一些小事

    你好,我叫黄雅婷,学号是1413042031,网络工程142班.因为小时候家里有很多课外书,有关神话和科学方面的杂志和书籍等,所以从小就喜欢看书,现在比较不挑,什么书都喜欢看,就是给我本字典,我也能看 ...

  4. 关于我学XSS躺过的那些坑

    XSS字符编码 在学习编码绕过时由于数量多,类型相似,不太容易记得住,记得全,故做此记录. 0x01 Html标签属性中执行 简单了解: Html标签属性中的XSS问题多属于javascript伪协议 ...

  5. 关于我用python表白成功这件事【表白成功】

    520,并非情人所属, 我们可以表白万物, 不管什么时候, 这都是一个特别的日子, 今天,我要表白所有, 心里有我的人! 在这个充满幸福的日子里, 我要把最美好的祝福, 送给心里有我的每一个人: 祝愿 ...

  6. 关于我-dinphy简介

    别   名:孜_行 英文名:dinphy QQ交流群:588266650 兴趣爱好:听音乐.打篮球.热衷于诗词文学 专    业:计算机 了    解:windows及Linux.android的基本 ...

  7. 关于我的FGC的OAuth2.0认证。

    这个名字估计很冷门,估计不会有人看到吧,我猜测的. (阅读以下全文之前请先搞定翻^#$%@#墙这件事.昨天看了一个笑话说墙之父方校长说自己有六个VPN账号,只是为了测试自己的墙好用还是VPN好用.哈哈 ...

  8. 关于我的PP0.1聊天软件（客户端）

    登陆界面: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  9. 关于我在17号“一个查询任意年份中任意月份的天数”程序编写中的代码&第二种方法！

    PS:下面的代码是我对于17号的练习题的一些新的看法(其实就是从另一个角度思考问题) package day20180917;import java.util.Scanner;//导包public c ...

随机推荐

  1. OC基础6：多态、动态类型和动态绑定

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于SEL类型的数据: (1).SEL ...

  2. [置顶] Firefox OS 学习——简单了解知识

    什么是Firefox OS ? Firefox OS 是一个为网页设计而生的能编译和独立的手机网页操作系统,我们相信在接下来的时代,网页应用将充满整个新兴操作设备,这也为当前许多网页开发者不需要太多的 ...

  3. 2014：超越炒作，进入部署SDN的时代

    2013 年,我们看到了非常多新的SDN 产品.体系结构.营销活动和各种会议,一些新的标准和开源组织也进入了这个领域.当时的SDN 刚刚从炒作周期的高点回归下来.转眼到了2014 年,这一年我们会看到 ...

  4. Win8开发疑问与解答

    疑问:怎样获取开发者许可证 打开VS2012时,怎么在没有取得开发者许可证之前,屏蔽/跳过弹出的窗体“获取Windows8开发者许可证 你需要具有开发者许可证才能开发适用于......” 打开Blen ...

  5. 编写javascript的基本技巧

    第一.编写可维护的代码 什么叫着编写可维护的代码呢?就是当我的做出来的项目,拿给其它编码团队能很快的看懂 你编写的代码,你的整个项目的逻辑等等.一个项目的修改维护是要比开发一个项目的成本 是要高的.例 ...

  6. ZCTF-Pwn

    版权声明:本文为博主原创文章,未经博主允许不得转载.  最近有了点时间,把ZCTF的pwn总结了下,就差最后一个pwn500,另找时间总结. 文件打包:http://files.cnblogs.com ...

  7. 【枚举+贪心】【TOJ3981】【ICPC Balloons】

    给你N种不同颜色气球,每种气球有个数目 count[i],给的同种颜色气球可能是L尺寸,或M尺寸. M个问题,每个问题有个解决人数ac[i]. 每个问题 要分配一种颜色的气球,尺寸要一样 现在 这些气 ...

  8. 【枚举+贪心】【ZOJ3715】【Kindergarten Electiond】

    题目大意: n 个人 在选取班长 1号十分想当班长,他已经知道其他人选择了谁,但他可以贿赂其他人改选他,问贿赂的最小值 ps.他自己也要投一个人 要处理一个问题是,他自己投谁 其实这个问题在这种局面下 ...

  9. 根据获取Enum名获取对应的值通用方法（仅限值为int的）

    /// <summary> /// 获取枚举对应的值 /// </summary> /// <typeparam name="T">枚举类型&l ...

  10. 《think in python》学习-10

    think in python 10 列表 和字符串相似,列表是值得序列.在列表中,它可以是任何类型,列表中的值成为元素,有时也称为列表项 s = [10,20,30,40] print s #列表也 ...