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 相关文章推荐
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
Oracle 常见问题解答
2006/10/09 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
ASP Json Parser修正版
2009/12/06 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Linux的文件类型
2012/03/07 面试题
先进集体事迹材料
2014/02/17 职场文书
超市国庆节促销方案
2014/02/20 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
党纪处分决定书
2015/06/24 职场文书
离婚民事起诉状
2015/08/03 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书