什么情况下document.write会覆盖页面及覆盖原理解释

会覆盖页面的情况

<!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()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My First Paragraph.</p>
<button οnclick="myFunction()">点击这里</button>

点击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”）;

</script>

那个document是一边加载一遍进行写操作，但是文档加载成功之后，这个document对象就会关闭了。

如果你这时你又重新加载了文档，比如说你调用了函数（在js中运行编写好程序后只是声明了有这个函数，但并没有调用，所以你一旦调用，就会重新加载文档），如下

function reUse（）{

document.write（“123”）;

}

</script>

就会新建一个document对象，它会覆盖你之前的内容。这跟你函数放的位置无关，无论是在其他输出语句的前后，还是说在head或body里面写就不一样，而是调用的时机，要明确什么时候文档会重新加载。

明确覆盖的原理后，主要在于是否会重新加载文档。重新加载文档的时机是什么：调用函数，或许还有其他。

什么情况下document.write会覆盖页面及覆盖原理解释相关推荐

ajax渲染的页面tp怎么赋值,【Vue】前后端不分离的情况下，TP5的视图页面中如何使用vue来接受和传递数据？...
在项目中遇到的一个情况,在做后台管理的时候,前后端没有做分离,如果做分离,成本太大,视图层使用了vuejs,请问如何在vuejs中接收和传递控制器传过来的数据?格式是怎么样的?请尽可能地提供一份控制器 ...
php 判断用户是否刷新,如何在php和ajax中创建一个注册页面，它会在不刷新页面的情况下检查某个用户名是否已经存在？ - php...
我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...
在没有个人/公司网站的情况下，如何利用同一个二维码自动识别手机系统（Android/IOS）跳转不同下载页面
一.使用场景开发了一款App,包括iOS及Android版,到了推广阶段,准备生成二维码让用户扫码下载,那这个二维码该怎么生成?iOS及Andorid各自生成一个二维码让用户区分下载?当然这种方式是 ...
【只需简单三个步骤】ACE系统前后端不分离情况下如何增加一个JSP嵌入页面
第1步在stmg/src/main/webapp/subsystem下创建一个newPage文件夹在newPage文件夹下新建一个newSubPage.jsp文件 <%@ page lang ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
m_Orchestrate learning system---九、在无法保证是否有图片的情况下，如何保证页面格式...
m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式一.总结一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
Thymeleaf——在不覆盖现有class属性的情况下动态添加CSS class解决方案
问题描述 th:class动态添加CSS class会覆盖现有class属性,导致class较多时,表达式过长. 官方文档 https://www.thymeleaf.org/doc/tutorial ...
[html] 页面布局时你使用最多的标签是什么？div吗？在什么情况下会使用到div？
[html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div? 页面的的整体布局使用<header> <main> <aside> < ...
gridview databind 会导致页面刷新马_Innodb批量页面刷盘情况下的quot;两次写quot;
//Innodb批量页面刷盘情况下的"两次写"// 之前的文章中,我们介绍过innodb的两次写特性,这里给出链接: InnoDB的两次写特性今天我们完善一下这部分的内容. 我们 ...

什么情况下document.write会覆盖页面及覆盖原理解释

什么情况下document.write会覆盖页面及覆盖原理解释相关推荐

最新文章

热门文章