document.write() 为什么会清空页面
很久以前遇到的问题,放着放着就忘记去研究了
最近看到一篇文章总结一下
作者:abloume
url: http://blog.csdn.net/u013451157/article/details/78699253
先来一段代码实例:(代码1)
<body>
<div>hello world</div> <script>
document.write();
document.write();
</script>
</body>
再来一段代码做比较(代码2)
<body>
<div>hello world</div> <script>
window.onload = function(){
document.write();
document.write();
}
</script>
</body>
很明显看到问题,在window.onload后,为什么2次执行document.write()是成功的(并不会覆盖),但就覆盖(或清空)了前面的文档
其实在执行window.onload之前.浏览器了创建文档流 ---> 然后这时候再执行window.onload函数,
而执行document.write()函数会自动调用document.open()函数,创建一个新的文档流,写入新的内容,就会覆盖原来的内容
,
借用作者的原话:window.onload事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容
再看看一段代码实例(代码3)
<body>
<div>hello world</div> <script>
window.onload = function(){
document.write();
document.close();
document.write();
}
</script>
</body>
这里就非常明显了,如果document.close()函数执行关闭,document.write()函数是执行了一次document.open()
所以只输出222
验证浏览器创建文档流能否关闭
就把第一段代码加上document.close()函数
<body>
<div>hello world</div> <script>
document.close();
document.write();
document.write();
</script>
</body>
输出的依然是
借用作者的原话:很遗憾,文档流是由浏览器创建,无权限手动关闭,并document.close()函数只能够关闭由document.open()函数创建的文档流
最后一个问题,window.onload执行为什么就能关闭
这是因为文档document对象改变为window对象在新作用域下
在代码3也可以看出来
document.write() 为什么会清空页面的更多相关文章
- asp.net清空页面上的所有TextBox
Asp.net中一次性清空页面上的所有TextBox中的内容,由于TextBox在客户端以<input type=”text”>形式来呈现的,因此解决方案有客户端和服务器端两种方式,服务器 ...
- 关于document.write()方法重绘页面问题
学习的时候,document.write()被告知是用来将内容写进页面里面,同时也被告知document.write()方法会重绘页面,但是关于什么时候会重绘,什么时候不会重绘页面没有太多解释. 首先 ...
- 根据标记清空页面中所有的input对象
function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input&quo ...
- jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序
document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...
- 利用document的readyState去实现页面加载中的效果
打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...
- JS跨域调用之document.domain--相同基础域名页面之间的调用
利用document.domain 实现跨域: 前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域 Javascript出于对 ...
- document对象操作:浏览器页面文件
//找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span>& ...
- phonegap 清空页面缓存
访问页面添加 <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV=& ...
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...
随机推荐
- 在modelarts上部署mask-rcnn模型
最近老山完成了对mask-rcnn在modelarts上的部署,部署模型来自于这个项目.部署的过程大体和我的上篇文章使用modelarts部署bert命名实体识别模型相似,许多细节也不在赘述.这篇文章 ...
- Spring Boot 整合Spring Data以及rabbitmq,thymeleaf,向qq邮箱发送信息
首先得将自己的qq开启qq邮箱的POP3/SMTP服务 说明: p,e为路由key. 用户系统完成登录的时候,将{手机号-时间-IP}保存到队列Phone-queue中,msg-sys系统获得消息打印 ...
- Ceph 概述和理论
1.1 Ceph概述 官网地址:https://docs.ceph.com/docs/master/ 1.Ceph简介 概述:Ceph是可靠的.可扩展的.统一的.分布式的存储系统.同时提供对象存储RA ...
- 【python3】Python十行代码搞定文字转语音
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:万能搜吧 都是copy的百度SDK文档,简单说说怎么用. 1.没安装Py ...
- 合成语音 TTS
弄了一天的合成语音 感觉好难受,明明这么简单的事情非弄得要这么复杂.... 引入命名空间 或者 导入命名空间 代码: using System; using System.Collections.Ge ...
- iSensor APP 之 摄像头调试 OV5642 续集2
参考上一篇博客 作为续集,主要测试 RAW格式下的 不同分辨率效果 iSensor APP 之 摄像头调试 OV5642 直接上图吧 720p 拍照效果
- linux-export
使自定义普通变量转换为环境变量: 1. env查看环境变量 2. 设置临时环境变量,关机重启时不生效. export path=$path:/usr/sbin/ 3. 修改profile文件,关机重启 ...
- 解决老浏览器不支持ES6的方法
转载地址:http://www.rockyxia.com/?p=669 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使 ...
- python学习-while
"""while 条件: 条件满足时,干的事情.如果条件一直满足,一直去重复的执行代码.直接条件不满足为止,停止循环."""# salary ...
- IJKPlayerView设置Header播放视频的方法
播放b站视频连接的实测图 https://github.com/Rukey7/IjkPlayerView 使用库的连接 在用这个库播放b站视频连接的时候总是播放不了 检查了一下是因为b站视频连接需要验 ...