简介
将输出流写入到网页的能力就是document.write,还有open() close() writeln()。方法都是接受一个字符串参数,即要写入到输出流中的文本。wirte原样写入,writeln在字符串末尾添加换行符。页面被加载过程中,可以使用这两个方法向页面中动态添加内容。
用法
...
<p>
<script>
document.write("<strong>"+(new Date()).toString()+"</strong>");
</script>
</p>
...
这个例子会创建一个DOM元素,然后输出到页面中。
此时再去浏览器中检测DOM的结构,会发现script与p之间多了一个strong元素,浏览器在解析完p元素之后,碰到script元素并执行之,此时document.write将一段HTML代码写入到文档流中,script脚本执行完毕后,浏览器会解析文档流中的字符串,对新添加的strong标签进行解析。
如果将渲染好的页面保存下来,不同的浏览器会有不同的结果。如Chrome和Firefox的做保存下来的页面文件中,script后面会增加strong标签,而IE中则是维持原状。(这里指的是原有的HTML结构,不同浏览器将页面保存会作不同的处理,有些会增加一些不影响原有结构的标签或注释。这意味着,如果浏览器重新加载Chrome或Firefox中保存下来的页面文件,就会多出一个strong标签。
如下:
遇到script标签
如果我们在document.write中输出script标签,那这就是一个有意思的问题了。
<html>
<body>
<script type="text/javascript">
document.write("<script>"+(new Date()).toString()+"</script>");
</script>
</body>
</html>
我们将代码作出上面的改动,意图在利用document.write在页面中插入一段脚本。
但是浏览器下刷新页面会发现不奏效,会显示一个没有意料到的页面。
检查DOM树发现这段脚本被拦腰截断了!浏览器将它解析成以下代码:
为了解决这个问题,我们可以对插入文本中闭合的的标签进行轻微修改,对最后一个>进行转义,变成>。
此时再刷新一下页面,就可以看到预想中的结果。再去看看DOM的结构,会发现在原有的script元素后面又多了一个新的<script>元素。
这个代码注意到,很多字符都需要转义!
document.write("<script type=\"text/javascript\">"+(new Date()).toString()+"<\/script>");
document.write使用的时机很重要
这样看来,利用document.write来在HTML中插入标签非常方便,就如同让浏览器在解析HTML的时候动态得添加标签,而且只需要一行代码即可,不需要使用document.createElement再将其插入到DOM中。
但为什么大家都不建议使用document.write呢?这跟document.write的实现机制有关。
例子:
<html>
<body>
<script type="text/javascript">
window.onload=function(){
document.write("<strong>"+(new Date()).toString()+"</strong>");
}
</script>
</body>
</html>
这个例子我们使用了load事件,但这个时候就不同了,浏览器会在加载好整个页面之后才去调用document.write,这时输出的内容就会重写整个页面! 如果想明显,可以setTimeout执行document.write。
放到DOMContentLoaded里面也是如此。
这样看到,除非是在浏览器关闭文档之前调用document.write,否则当前页面都会被清除。
原因:
document.write是JS中对document.open所开启的文档流document stream操作的API,能够直接在文档流写入字符串,一旦文档流已经关闭,那document.write会重新利用document.open打开新的文档流并写入,此时原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染新的页面。
使用场景
加载需要配合JS脚本使用的外部CSS文件
利用下面的语句加载外部样式文件:
<scirpt>
document.write('<link rel="stylesheet" href="style_neads_js.css">');
</script>
将所有需要用到JS的样式都放到这个外部样式表中,如果浏览器不禁用JS,那么该样式表就会被顺利加载,否则页面就不会使用该样式。
就是说这个样式表是给JS动态创建某些DOM使用的。
弊端
为什么不建议使用document.write()?
- document.write (henceforth DW) 对于XHTML文档无效
- document.write 如果在页面加载完成之后执行会重写页面 或者不起作用
- document.write 在遇到的标签处执行,它不能注入到给定的节点
- document.write写入序列化的文本,并不是按DOM在概念上的工作方式,而是一种容易产生bug的方法(innerHTML也有同样的问题)