document.write的问题

最新推荐文章于 2024-06-23 06:45:00 发布

xxxspade

最新推荐文章于 2024-06-23 06:45:00 发布

阅读量2.9k

点赞数

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/jlin991/article/details/56285249

版权

前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

简介

将输出流写入到网页的能力就是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也有同样的问题）

xxxspade

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
document.write的问题

简介将输出流写入到网页的能力就是document.write，还有open() close() writeln()。方法都是接受一个字符串参数，即要写入到输出流中的文本。wirte原样写入，writeln在字符串末尾添加换行符。页面被加载过程中，可以使用这两个方法向页面中动态添加内容。用法...<p><script>document.write("<strong>"+(new Date()).
复制链接

扫一扫

专栏目录