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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
js表单登陆验证示例
Oct 19 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
微信小程序实现圆形进度条动画
Nov 18 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如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python全栈之列表数据类型详解
2019/10/01 Python
django实现支付宝支付实例讲解
2019/10/17 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
大一新生学期自我评价
2014/04/09 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
付款承诺函范文
2015/01/21 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
先进工作者个人总结
2015/02/15 职场文书
公司2015年终工作总结
2015/05/26 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
优质服务标语口号
2015/12/26 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python