document.write()覆盖原文档的原因详解
来源:互联网 发布:电气女生知乎 编辑:程序博客网 时间:2024/05/29 17:27
1.会覆盖页面的情况
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="www.google.com" /> <title>蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ document.write("分享互助");}</script></head> <body> <div>蚂蚁部落欢迎您</div></body> </html>
从以上代码的可以看出document.write()函数将原来的文档内容清空了,下面介绍一下出现此种情况的原因:
window.onload事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容。
2.同样也是覆盖掉了原文档
<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My First Paragraph.</p><button onclick="myFunction()">点击这里</button><script>function myFunction(){document.write("糟糕!文档消失了。");}</script></body></html>
点击button时会覆盖页面
不会覆盖页面的情况
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/javascript"> document.write("分享互助");</script></head> <body> <div>蚂蚁部落欢迎您</div></body> </html>
在以上代码中,原来的文档内容并没有被清空,这是因为当前文档流是由浏览器所创建,并且document.wirte()函数身处其中,也就是执行此函数的时候文档流并没有被关闭,这个时候不会调用document.open()函数创建新文档流,所以也就不会被覆盖了。
覆盖原理解释:
加载文档的时候就像是创建了document对象,可以向文件流写入东西,就像在script标签里面直接写一句
document.write(“123”);那个document是一边加载一遍进行写操作,但是文档加载成功之后,这个document对象就会关闭了。
如果你这时你又重新加载了文档,比如说你调用了函数(在js中运行编写好程序后只是声明了有这个函数,但并没有调用,所以你一旦调用,就会重新加载文档),如下
<script> function reUse(){ document.write(“123”); }</script>
就会新建一个document对象,它会覆盖你之前的内容。这跟你函数放的位置无关,无论是在其他输出语句的前后,还是说在head或body里面写就不一样,而是调用的时机,要明确什么时候文档会重新加载。
明确覆盖的原理后,主要在于是否会重新加载文档。重新加载文档的时机是什么:调用函数,或许还有其他。
- document.write()覆盖原文档的原因详解
- javascript document.write()覆盖原文档的问题
- javascript document.write()覆盖原文档的问题
- web开发JS学习(二)关于document.write会覆盖文档流的理解
- document.write()覆盖页面
- document.write()会清空原来的内容原因
- document.write()会清空原来的内容原因
- 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档
- document.write插入js标签会覆盖页面的问题
- 【JavaScript】document.write()的用法和清空的原因
- document.write用法与清空原来的内容原因
- document.write在文档加载后的使用
- 使用document.write()输出覆盖HTML问题
- 使用document.write输出覆盖HTML问题
- FireFox 的 Document.write
- document.write的用处
- document.write的用处!
- document.write的问题
- 关于DecimalFormat对数据的处理
- 关于a链接去掉下划线
- 问题收集
- javaEE JDBC
- PostgreSQL(HGDB)仅保留最近一周日志记录的设置方式
- document.write()覆盖原文档的原因详解
- 初识Hibernate之关联映射(二)
- 130. Surrounded Regions
- jpa小记:注解条件查询
- 机器学习技法课程学习笔记11 -- Gradient Boosted Decision Tree
- ES6常用功能介绍及举例说明
- GKRule
- HTTP协议请求与回应报文格式总结
- Java字符串获取