document.write() 清空覆盖内容

小灰灰 2020-06-01 13:10 978阅读 0赞

# document.write() 清空覆盖内容

document.write方法可以在文档中写入指定的字符串。

方法虽然比较简单，不过其中也有很多知识点需要特别注意。

会面会通过代码实例对一些要点做详细介绍。

语法结构：

```javascript
document.write(exp1,exp2,exp3,....)
```

参数解析：

（1）.expN：可以按照指定顺序一次性在文档写入一个或者多个字符串。

**浏览器支持：**

（1）.IE浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script> 
document.write("本站url地址是");
</script> 
</head> 
<body>
dandelioncloud.cn
</body> 
</html>
```

上述代码可以在文档中写入字符串"本站url地址是"。

为了满足实际需求，可能需要将内容写入指定位置，代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
</head> 
<body>
dandelioncloud.cn
<script>
document.write("是本站url地址");
</script>
</body> 
</html>
```

上面代码会在网址后面插入指定的字符串。

前面代码都比较简单，应该没有任何疑问，但是此方法有时候的表现会让人匪夷所思。

看如下代码实例：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script>
window.onload=function(){
  document.write("www.dandelioncloud.cn");
}
</script> 
</head> 
<body> 
是本站的url地址
</body> 
</html>
```

上述代码的本意是在页面生成一段完整的语句：

www.dandelioncloud.cn是本站的url地址，然而实际情况是页面原来的内容被清空覆盖。

看到上面的表现，首先是感觉怪异，第二个感觉操作挺危险的，如果使用不当可能会引起严重的问题。

下面就分析一下原因，由此可以避免再次发生上述类似问题：

（1）.document.write方法的调用时机是文档内档内容完全加载完毕之后。

（2）.此时文档流已经关闭。

（3）.当调用document.write方法的时候，会隐式调用document.open方法。

（4）document.open方法会新创建一个文档流，会覆盖原来文档的内容，所以原来的内容被清空了。

**由上面的结论引出新的问题：**

既然执行document.write()会隐式调用document.open方法。

为什么本文前两个代码实例并没有情况原有内容的现象内，原因分析如下：

（1）.document.write方法执行的时候，文档流并没有被关闭，且深处其中。

（2）.此时并不会调用document.open方法创建一个新的文档流，否则就是多次一举。

再来看一段代码实例：

```html
<!DOCTYPE html>      
<html>      
<head>      
<meta charset=" utf-8">      
<meta name="author" content="http://www.dandelioncloud.cn/" />      
<title>蒲公英云</title>     
<script>
document.close(); 
document.write("www.dandelioncloud.cn");
</script> 
</head>  
<body>  
<div>蒲公英云</div>
</body>  
</html>
```

上面代码的初衷是，调用document.close方法关闭文档流。

然后再调用document.write方法写入新的内容，由于会隐式调用document.open方法，所以原来页面的内容会被覆盖清空，然而页面效果并未符合预期，原因分析如下：

（1）.方法处于文档流中，且此文档流是由浏览器创建。

（2）.document.close方法没有权限关闭由浏览器创建的文档流。

再来演示一段代码实例，加深理解：

```html
<!DOCTYPE html>       
<html>       
<head>       
<meta charset=" utf-8">       
<meta name="author" content="http://www.dandelioncloud.cn/" />       
<title>蒲公英云</title>      
<script>   
function done(){  
  let newW=window.open("","蒲公英云","_blank");  
  newW.document.write("antzone");  
  newW.document.close();  
  newW.document.write("dandelioncloud"); 
}  
window.onload=function(){  
  let obt=document.getElementById("bt");  
  obt.onclick=function(){  
    done();  
  }  
}  
</script>  
</head>   
<body>   
<div>本站url地址是www.dandelioncloud.cn</div>  
<input type="button" id="bt" value="查看效果"/>  
</body>   
</html>
```

代码分析如下：

（1）.点击按钮后会执行事件处理函数，进而调用done函数。

（2）.再通过window.open方法创建一个新的窗口，然后利用document.write方法在页面中写入"antzone"。

（3）.再使用document.close方法关闭此文档流，此方法可以关闭通过window.open创建的文档。

（4）.最后document.write方法隐式调用document.open方法创建一个新的文档流，然后写入"dandelioncloud"。