document.write()覆盖原文档的原因详解

最新推荐文章于 2021-02-12 23:30:52 发布

澪月

最新推荐文章于 2021-02-12 23:30:52 发布

阅读量3.7k

点赞数 2

分类专栏： js 文章标签： js dom解析例子

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1.会覆盖页面的情况

<!DOCTYPE html>      
<html>      
<head>      
<meta charset=" utf-8">      
<meta name="author" content="www.google.com" />      
<title>蚂蚁部落</title>     
<script type="text/javascript">  
window.onload=function(){
  document.write("分享互助");
}
</script>
</head>  
<body>  
<div>蚂蚁部落欢迎您</div>
</body>  
</html>

从以上代码的可以看出document.write()函数将原来的文档内容清空了，下面介绍一下出现此种情况的原因:
window.onload事件是在文档内容完全加载完毕再去执行事件处理函数，当然文档流已经关闭了，这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。

2.同样也是覆盖掉了原文档

<!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>

点击button时会覆盖页面

不会覆盖页面的情况

<!DOCTYPE html>      
<html>      
<head>      
<meta charset=" utf-8">      
<meta name="author" content="http://www.softwhy.com/" />      
<title>蚂蚁部落</title>     
<script type="text/javascript">  
document.write("分享互助");
</script>
</head>  
<body>  
<div>蚂蚁部落欢迎您</div>
</body>  
</html>

在以上代码中，原来的文档内容并没有被清空，这是因为当前文档流是由浏览器所创建，并且document.wirte()函数身处其中，也就是执行此函数的时候文档流并没有被关闭，这个时候不会调用document.open()函数创建新文档流，所以也就不会被覆盖了。

覆盖原理解释:

加载文档的时候就像是创建了document对象，可以向文件流写入东西，就像在script标签里面直接写一句

document.write（“123”）;

那个document是一边加载一遍进行写操作，但是文档加载成功之后，这个document对象就会关闭了。

如果你这时你又重新加载了文档，比如说你调用了函数（在js中运行编写好程序后只是声明了有这个函数，但并没有调用，所以你一旦调用，就会重新加载文档），如下

<script>
   function  reUse（）{
     document.write（“123”）;
  }
</script>

就会新建一个document对象，它会覆盖你之前的内容。这跟你函数放的位置无关，无论是在其他输出语句的前后，还是说在head或body里面写就不一样，而是调用的时机，要明确什么时候文档会重新加载。

明确覆盖的原理后，主要在于是否会重新加载文档。重新加载文档的时机是什么：调用函数，或许还有其他。

澪月

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
document.write()覆盖原文档的原因详解

1.会覆盖页面的情况<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="www.google.com" /> <title>蚂蚁部落</title> <script type="text/javascript">
复制链接

扫一扫