document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。

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

　　关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。为了演示document.write()方法，我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容，另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档，以.html文件扩展名保存，并在浏览器中打开文档。

　　示例1创建一个按钮，它为文档组合新的HTML内容，包括新文档标题的HTML标记和标记的颜色属性。示例中有一个读者所不熟悉的操作符+＝，它把其右侧的字符串加到其左侧的变量中，这个变量用来存放字符串，这个操作符能很方便地把几个单独的语句组合成—个长字符串。使用组合在newContent变量中的内容，document.write()语句可以把所有新内容写到文档中，完全清除示例1中的内容。然后需要调用document.close()语句关闭输出流。当载入该文档并单击按钮时，可以注意到浏览器标题栏中的文档标题因此而改变。当回到原始文档并再次单击该按钮时，可以看到动态写入的第二个页面的载入速度甚至比重载原始文档还要快。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>

<script language="JavaScript">

  function reWrite(){

    // assemble content for new window

    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>"

    // write HTML to new window document

    document.write(newContent)

    document.close() // close layout stream

  }

</script>

</head>

<body>

  <form>

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

  </form>

</body>

</html>

　　示例2中，情况有点复杂，因为脚本创建了一个子窗口，整个脚本生成的文档都将写入该窗口中。为了使新窗口的引用在两个函数中保持激活状态，我们将newWindow变量声明为全局变量。页面载入时，onLoad事件处理调用makeNewWindow()函数，该函数生成一个空的子窗口。另外，我们在window.open()方法的第三个参数中加入一个属性，使子窗口的状态栏可见。

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

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

示例2 在另一个窗口中使用document.write()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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()

    }

    // bring subwindow to front

    newWindow.focus()

    // assemble content for new window

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

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

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

    // write HTML to new window document

    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>

js中document.write的那点事的更多相关文章

  1. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  2. JS 中document.URL 和 window.location.href 的区别

    实际上,document 和 window 这两个对象的区别已经包含了这个问题的答案. document 表示的是一个文档对象,window 表示一个窗口对象. 一个窗口下面可以有很多的documen ...

  3. js中document.write()使用方法

    <script>             var hrf = window.location.href;           if(hrf.indexOf('change')>0){ ...

  4. JS中document对象和window对象有什么区别

    简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo ...

  5. 转-JS中document对象详解

    对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置 ...

  6. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  7. js中document.all 的用法

    1. document.all是什么? document.all 实质就是文档中所有元素的集合.可以看做一个数组.   2.document.all怎么用? 2.1 根据下标取元素. 语法: docu ...

  8. js中document的用法

    document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)docume ...

  9. JS中 document.getElementById 对象

    Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...

随机推荐

  1. HTML Agility Pack：簡單好用的快速 HTML Parser

    HTML Agility Pack:簡單好用的快速 HTML Parser Codeplex 軟體套件(Package)資訊 套件名稱 HTML Agility Pack 作者 Simon Mouri ...

  2. python tcp 实时抓包

    问题:之前我们系统上线后,因为是旧的系统,没有加统计的功能,比如用户喜欢那个页面,是哪些用户再访问,接口的负载能力等等. 解决办法:1,现有代码更改,添加功能.现有代码侵入太多,工作量比较大 2,想到 ...

  3. Windows 10官方原版ISO制作方法

    其实市面上的ISO原版都是这样的方法制作成光盘,然后再打包出来供人们下载的. 1.下载Windows 10安装程序工具: https://www.microsoft.com/zh-cn/softwar ...

  4. 推荐13个.Net开源的网络爬虫

    1:.Net开源的跨平台爬虫框架 DotnetSpider Star:430 DotnetSpider这是国人开源的一个跨平台.高性能.轻量级的爬虫软件,采用 C# 开发.目前是.Net开源爬虫最为优 ...

  5. SourceTree 的初次使用的两个小问题

    菜鸟才开始使用SourceTree,出现了两个小问题,特此整理一下,希望对各位新手有帮助.刚开始以为装了SourceTree就不用装git了,其实不然,不装git就会出现下面第一个问题: 1.新手使用 ...

  6. office 2010 正在配置Microsoft Office ...

    原因主要是安装时候所用账户和你目前登陆的账户不为同一个账户,或者你进行过覆盖安装或是重新安装过系统但是office得安装目录没有变. 解决方法:激活office----更改注册表--完成 [HKEY_ ...

  7. Revit API遍历全部风管，找到与风管相关的墙开洞

    涉及向量计算,求相交等相关技术. )                 {                     foreach (Face face in solid.Faces)          ...

  8. Odoo8出现Internal Server Error的解决办法之一

    转载地址:http://blog.sina.com.cn/s/blog_7cb52fa80102vaf3.html     问题: 不知怎么回事,我的Odoo8出错了,重装也一样出错信息如下 Inte ...

  9. windows nginx出现 was not signaled for 5s的看过来

    windows下 nginx 配置ssl的key是不能存储密码的,否则启动时会提示输入密码 输入后也启动不起来,会报错: 2011/04/18 09:49:09 [alert] 1992#4548: ...

  10. 【jvm】java查看内存使用jmap,jstat和jstack使用 ，docker启动服务下查看jvm使用情况

    [声明,如果是docker启动的服务,可以在进入容器内后,再使用如下命令操作] [docker exec -it 容器ID  /bin/bash     即可进入容器内] [如果不是docker启动的 ...