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 ...
随机推荐
- 【华为云网络技术分享】HTTP重定向HTTPS配置指南
[摘要] 本文介绍使用华为云弹性负载均衡配置Http重定向到Https的方法. 1. HTTP.HTTPS 头部标识 ELB 对 HTTPS 进行代理,无论是 HTTP 还是 HTTPS 请求,到了 ...
- Quantitative proteomics of Uukuniemi virus-host cell interactions reveals GBF1 as proviral host factor for phleboviruses（乌库涅米病毒-宿主细胞互作的定量蛋白质组学揭示了GBF1是个白蛉病毒的前病毒宿主因子）-解读人：谭亦凡
期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:1德国海德堡大学附属医院2德国汉诺威医科大学3德国亥姆霍茲感染研 ...
- Multiplication Game
Description Alice and Bob are in their class doing drills on multiplication and division. They quick ...
- C.Dominated Subarray
题目:受主导的子序列 题意:序列t至少有2个元素,我们称序列t被数字出现次数最多的元素v主导,且出现次数最多的元素必须是唯一的 你被给予了序列a1, a2, ..., an,计算它的最短受主导子序列, ...
- Java并发编程系列-(1) 并发编程基础
1.并发编程基础 1.1 基本概念 CPU核心与线程数关系 Java中通过多线程的手段来实现并发,对于单处理器机器上来讲,宏观上的多线程并行执行是通过CPU的调度来实现的,微观上CPU在某个时刻只会运 ...
- Socket无法通过防火墙的问题
无论是配好端口还是例外的应用程序都不行 更改本地终结点为 socket.Bind()); IPAddress.Any 不要使用127.0.0.1 不要使用127.0.0.1 不要使用127.0.0.1
- WebAPI接口的自动化测试1
自动化测试要满足四个条件: 1 - 自动化用例能够完成所有测试步骤 -------- postman不支持 没有完整的用例管理系统 2 - 每个用例的输入数据,必须要自动填入 -------- ...
- mysql中where和having子句的区别和具体用法
1.mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having ...
- EF Core 基础知识
数据库连接字符串 在 ASP.NET Core 添加配置片段: { "ConnectionStrings": { "BloggingDatabase": &qu ...
- 优先队列与TopK
一.简介 前文介绍了<最大堆>的实现,本章节在最大堆的基础上实现一个简单的优先队列.优先队列的实现本身没什么难度,所以本文我们从优先队列的场景出发介绍topK问题. 后面会持续更新数据结构 ...