一直用 document.write() 方法向浏览器中显示数据用,把它当做 Alert() 使用, 看来这样用有些大材小用了,下面说说它的主要用处。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一直用 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="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>
总结:
最近在写一个静态资源加载器, 其中有用到 document.write, 在经历过一翻折腾后, 发现 document.write 还是有点内容的, 所以决定折腾点东西记录下, 同时也算是给自己积累点东西.
来源: