document. write会清空页面原因分析

最新推荐文章于 2020-09-09 11:53:56 发布

Hal白夜

最新推荐文章于 2020-09-09 11:53:56 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：教程知识文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_38958597/article/details/85245983

教程知识专栏收录该内容

16 篇文章

订阅专栏

探讨JavaScript中document.write在不同场景下导致页面覆盖的原因，及如何避免此现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不知道睿智优快云又抽什么疯，标题document.write竟然说是非法字符，害得我只能换成句号

在看JS教程的时候，有这样一个例子

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

界面是这样的
在这里插入图片描述
点击按钮之后，页面被清空了

但是如果我不是用函数，而是直接这样输出的话，就不会有覆盖的效果，而是把这句话打印在页面后面


<script>
document.write("糟糕！文档消失了。");
</script>

网上看了一些资料，发现用onload或函数点击事件调用，都会产生清空覆盖页面的现象
个人理解：
当使用document.write的时候，如果当前的文档流已经被关闭，那就会新创建一个文档流执行document.write语句，同时也就覆盖了之前的页面。onload是在文档加载完毕后再去执行的，文档流就已经是加载完毕的了，而按钮点击事件，也是在文档加载完毕后点击触发的。
这两种情况都是在文档流关闭以后执行的，而这个时候执行document.write()就会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。
不用onload或按钮点击而是直接把document.write()写在代码里的话，执行这句的时候文档流还未关闭，所以不需要新创建文档流，就不会覆盖了。