document.write的几点使用心得

时间：2021-05-28

一直用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还是有点内容的,所以决定折腾点东西记录下,同时也算是给自己积累点东西.

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章