JS 中document.write()的用法和清空的原因浅析


Posted in Javascript onDecember 04, 2017

可能很多朋友都遇到过这样的情况,那就是使用document.write()函数向网页中写内容的时候,会把文档中的原来的内容给清空,这一点对于初学者来说算是一个困扰,下面就介绍一下为什么会出现这种情况,当然也就知道如何避免此种情况的发生了。

先看一段代码实例:

<!DOCTYPE html>   
<html>   
  <head>   
  <meta charset=" utf-8">      
  <title>Document</title>   
  <script type="text/javascript"> 
    window.onload=function(){
      document.write("重温 JavaScript");
    }
  </script> 
</head> 
<body> 
  <div>Hello JavaScript</div> 
</body> 
</html>

从以上代码的可以看出document.write()函数将原来的文档内容清空了,下面介绍一下出现此种情况的原因:

window.onload事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容。不过很多朋友还有会这样的疑问,为什么类似下面的情况,原来网页中的内容不会被覆盖,代码如下:

<!DOCTYPE html>   
<html>   
  <head>   
  <meta charset=" utf-8">     
  <title>Document</title>   
  <script type="text/javascript"> 
    document.write("重温 JavaScript");
  </script> 
</head> 
<body> 
  <div>Hello JavaScript</div> 
</body> 
</html>

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

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset=" utf-8">     
  <title>Document</title>   
  <script type="text/javascript">
    document.close(); 
    document.write("重温 JavaScript");
  </script> 
</head> 
<body> 
  <div>Hello JavaScript</div> 
</body> 
</html>

上面使用document.close()关闭文档流了,为什么还是不能够覆盖原来的内容的,很遗憾,文档流是由浏览器创建,无权限手动关闭,document.close()函数只能够关闭由document.open()函数创建的文档流。看下面的代码实例:

<!DOCTYPE html>    
<html>    
<head>    
  <meta charset=" utf-8">      
  <title>Document</title>   
  <script type="text/javascript">  
  function create(){ 
    var newWindow=window.open("","Document","_blank"); 
    newWindow.document.write("Hello JavaScript"); 
    newWindow.document.close(); 
    newWindow.document.write("覆盖后的输出"); 
  } 
  window.onload=function(){ 
    var obt=document.getElementById("bt"); 
    obt.onclick=function(){ 
      create(); 
    } 
  } 
</script> 
</head>  
<body>  
  <div id="print">Hello JavaScript</div> 
  <input type="button" id="bt" value="查看效果"/> 
</body>  
</html>

由doucment.open()创建的文档流就可以由document.close()关闭,那么第二个document.write()输出的内容会覆盖掉第一个输出的内容。

异步引用外部JavaScript时,必须先运行document.open()清空文档,然后才能运行document.write(),参数写在body内容的开头。

如果不先运行document.open(),直接运行document.write(),则无效且Chrome有如下提示:

JS 中document.write()的用法和清空的原因浅析

// asyncWrite.js
document.open();
document.write('<p>test</p>');
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
  <script src="asyncWrite.js" async></script>
</body>
<!-- 运行后 -->
<body>
  <p>test</p>
</body>

document.write()也能写入含有script标签的字符串,但是需要转义。写入的script标签中的内容会正常运行。

<!-- 运行前 -->
<script>
  document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
  document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>

document.write()可以传入多个参数。

<!-- 运行前 -->
<body>
  <script>
    document.write('<h2>multiArgument</h2>','<p>test</p>');
  </script>
</body>
<!-- 运行后 -->
<body>
  <script>
    document.write('<h2>multiArgument</h2>','<p>test</p>');
  </script>
  <h2>multiArgument</h2>
  <p>test</p>
</body>

总结

以上所述是小编给大家介绍的JS 中document.write()的用法和清空的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
jQuery知识点整理
Jan 30 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 #Javascript
浅谈 vue 中的 watcher
Dec 04 #Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 #Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
You might like
浅析php与数据库代码开发规范
2013/08/08 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 写类方式之二
2009/07/05 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python缓存技术实现过程详解
2019/09/25 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
职工运动会邀请函
2014/01/19 职场文书
十八大闭幕感言
2014/01/22 职场文书
大学生求职信
2014/06/17 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
行政复议答复书
2015/07/01 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
python库sklearn常用操作
2021/08/23 Python