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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
实例分析javascript中的异步
Jun 02 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判断ip黑名单程序代码实例
2014/02/24 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php简单获取复选框值的方法
2016/05/11 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
python创建进程fork用法
2015/06/04 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python爬虫---requests库的用法详解
2020/09/28 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
紧急迫降观后感
2015/06/15 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis