什么情况下document.write会覆盖页面及覆盖原理解释
2017-04-05 17:25
411 查看
会覆盖页面的情况
1
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时会覆盖页面
不会覆盖页面的情况
在以上代码中,原来的文档内容并没有被清空,这是因为当前文档流是由浏览器所创建,并且document.wirte()函数身处其中,也就是执行此函数的时候文档流并没有被关闭,这个时候不会调用document.open()函数创建新文档流,所以也就不会被覆盖了。
覆盖原理解释
加载文档的时候就像是创建了document对象,可以向文件流写入东西,就像在script标签里面直接写一句
<script>
document.write(“123”);
</script>
那个document是一边加载一遍进行写操作,但是文档加载成功之后,这个document对象就会关闭了。
如果你这时你又重新加载了文档,比如说你调用了函数(在js中运行编写好程序后只是声明了有这个函数,但并没有调用,所以你一旦调用,就会重新加载文档),如下
<script>
function reUse(){
document.write(“123”);
}
</script>
就会新建一个document对象,它会覆盖你之前的内容。这跟你函数放的位置无关,无论是在其他输出语句的前后,还是说在head或body里面写就不一样,而是调用的时机,要明确什么时候文档会重新加载。
明确覆盖的原理后,主要在于是否会重新加载文档。重新加载文档的时机是什么:调用函数,或许还有其他。
1
从以上代码的可以看出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时会覆盖页面
不会覆盖页面的情况
在以上代码中,原来的文档内容并没有被清空,这是因为当前文档流是由浏览器所创建,并且document.wirte()函数身处其中,也就是执行此函数的时候文档流并没有被关闭,这个时候不会调用document.open()函数创建新文档流,所以也就不会被覆盖了。
覆盖原理解释
加载文档的时候就像是创建了document对象,可以向文件流写入东西,就像在script标签里面直接写一句
<script>
document.write(“123”);
</script>
那个document是一边加载一遍进行写操作,但是文档加载成功之后,这个document对象就会关闭了。
如果你这时你又重新加载了文档,比如说你调用了函数(在js中运行编写好程序后只是声明了有这个函数,但并没有调用,所以你一旦调用,就会重新加载文档),如下
<script>
function reUse(){
document.write(“123”);
}
</script>
就会新建一个document对象,它会覆盖你之前的内容。这跟你函数放的位置无关,无论是在其他输出语句的前后,还是说在head或body里面写就不一样,而是调用的时机,要明确什么时候文档会重新加载。
明确覆盖的原理后,主要在于是否会重新加载文档。重新加载文档的时机是什么:调用函数,或许还有其他。
相关文章推荐
- 什么情况下document.write会覆盖页面及覆盖原理解释
- 什么情况下document.write会覆盖页面及覆盖原理解释
- 【小白】javascript中的“文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖”
- document.write插入js标签会覆盖页面的问题
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
- document.write()覆盖页面
- 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档
- 引用unp解释socket在什么情况下可读?
- foreach适合在什么情况下使用+foreach的内部原理剖析
- 什么是多态 重载 覆盖 继承 最好解释
- Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情?
- JavaScript中使用document.write向页面输出内容实例
- JavaScript中使用document.write向页面输出内容实例
- document.all.item的解释和一个表单向多页面提交
- OC中属性readwrite,readonly,assign,retain,copy,nonatomic 各是什么作用,在那种情况下用?
- 使用document.write()输出覆盖HTML问题
- 关于document.write()会清空dom的一点解释
- javascript document.write()覆盖原文档的问题
- JavaScript-2.2 document.write 输出到页面的内容
- 解决AJAX读取页面中的Javascript问题 document.write