文章导航

document.write() 清空覆盖内容

2018-12-5 16:38| 作者: admin| 查看: 73| 评论: 0|来自: 蚂蚁部落

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.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
document.write("本站url地址是");
</script> 
</head> 
<body>
softwhy.com
</body> 
</html>

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head> 
<body>
softwhy.com
<script>
document.write("是本站url地址");
</script>
</body> 
</html>

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

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

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  document.write("www.softwhy.com");
}
</script> 
</head> 
<body> 
是本站的url地址
</body> 
</html>

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

www.softwhy.com是本站的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.softwhy.com/" />      
<title>蚂蚁部落</title>     
<script>
document.close(); 
document.write("www.softwhy.com");
</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.softwhy.com/" />       
<title>蚂蚁部落</title>      
<script>   
function done(){  
  let newW=window.open("","蚂蚁部落","_blank");  
  newW.document.write("antzone");  
  newW.document.close();  
  newW.document.write("softwhy"); 
}  
window.onload=function(){  
  let obt=document.getElementById("bt");  
  obt.onclick=function(){  
    done();  
  }  
}  
</script>  
</head>   
<body>   
<div>本站url地址是www.softwhy.com</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方法创建一个新的文档流,然后写入"softwhy"。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部