php document.write,在JS中有关document.write()的用法(详细教程)
这篇文章主要介绍了JS 中document.write()的用法和清空的原因浅析,需要的朋友可以参考下
可能很多朋友都遇到过这样的情况,那就是使用document.write()函数向网页中写内容的时候,会把文档中的原来的内容给清空,这一点对于初学者来说算是一个困扰,下面就介绍一下为什么会出现这种情况,当然也就知道如何避免此种情况的发生了。
先看一段代码实例:
Document
window.οnlοad=function(){
document.write("重温 JavaScript");
}
Hello JavaScript
从以上代码的可以看出document.write()函数将原来的文档内容清空了,下面介绍一下出现此种情况的原因:
window.onload事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容。不过很多朋友还有会这样的疑问,为什么类似下面的情况,原来网页中的内容不会被覆盖,代码如下:
Document
document.write("重温 JavaScript");
Hello JavaScript
在以上代码中,原来的文档内容并没有被清空,这是因为当前文档流是由浏览器所创建,并且document.wirte()函数身处其中,也就是执行此函数的时候文档流并没有被关闭,这个时候不会调用document.open()函数创建新文档流,所以也就不会被覆盖了。可能还有朋友会问为什么下面的方式还是不行,代码如下:
Document
document.close();
document.write("重温 JavaScript");
Hello JavaScript
上面使用document.close()关闭文档流了,为什么还是不能够覆盖原来的内容的,很遗憾,文档流是由浏览器创建,无权限手动关闭,document.close()函数只能够关闭由document.open()函数创建的文档流。看下面的代码实例:
Document
function create(){
var newWindow=window.open("","Document","_blank");
newWindow.document.write("Hello JavaScript");
newWindow.document.close();
newWindow.document.write("覆盖后的输出");
}
window.οnlοad=function(){
var obt=document.getElementById("bt");
obt.οnclick=function(){
create();
}
}
Hello JavaScript
由doucment.open()创建的文档流就可以由document.close()关闭,那么第二个document.write()输出的内容会覆盖掉第一个输出的内容。
异步引用外部JavaScript时,必须先运行document.open()清空文档,然后才能运行document.write(),参数写在body内容的开头。
如果不先运行document.open(),直接运行document.write(),则无效且Chrome有如下提示:
// asyncWrite.js
document.open();
document.write('
test
');
document.close();
test
document.write()也能写入含有script标签的字符串,但是需要转义。写入的script标签中的内容会正常运行。
document.write('
");<\/script>');
document.write('
");<\/script>');");
test
document.write()可以传入多个参数。
document.write('
multiArgument
','
test
');
document.write('
multiArgument
','
test
');
multiArgument
test
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
php document.write,在JS中有关document.write()的用法(详细教程)相关推荐
- 原生js html insert,js中AppendChild与insertBefore的用法详细解析
appendChild定义appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. ...
- js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
- JS中break和continue的用法
break和continue的用法 Break--跳出循环.判断,用于判断或循环语句中 Continue--跳出本次循环,只能用于循环语句中. 区分是否为自定义标识符,其后加冒号,为自定义标识符. B ...
- js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
- 第22篇 js中的this指针的用法
前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() {this ...
- js中try和catch的用法
js中try和catch的用法 版权声明:本文为@lyhh5原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明 原文链接:https://blog.csdn.net/l ...
- word2003如何设置护眼模式_在word中开启保护眼睛模式的详细教程
导读: 今天小编给大家讲解在word中开启保护眼睛模式的详细教程,有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 今天小编给大家讲解在word中开启保护眼睛模式的详细教程,有需要或者 ...
- JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中 文本框取出来 ...
最新文章
- GridView 里的删除不起作用
- 关于ASP.NET MVC 项目在本地vs运行响应时间过长无法访问时,解决方法!
- 第三次学JAVA再学不好就吃翔(part76)--Collection类
- 六、 跨多个WebService管理Session
- BAT架构师进阶:大型网站架构书籍推荐
- 科大讯飞2020完整事件抽取系统(bert+数据集)
- Python这五个坑,80%你不知道(对的,五个你知道1个就达到一般水平了)
- 例1:反转一个三位整数
- 要求或禁止在堆中产生对象
- 罗技鼠标G304驱动与讲解(其余类型驱动见文末)
- 我的世界 Unity3D MineCraft 用Unity3D制作类似MineCraft我的世界的游戏 正经梳理一下开发01
- 上海网站备案人工服务器,上海网站备案中心
- es6 新增 常用 语法 知识点 汇总
- PCIE,USB传输速率和带宽
- TypeScript 中slice(-1)是什么意思?
- (一)傅里叶变换:傅里叶级数(Fourier Series)
- 在Delphi中怎样调用立象(Argox)条码打印机动态库PPLA/PPLB(DLL)
- Python全栈开发零基础学习通关秘籍:2018新手入门指南
- 相思似海深,旧事如天远
- 完美解决ubuntu下qq、tim图片无法加载问题
热门文章
- linux操作这样用视频,Linux下使用mencoder对视频进行操作
- Hasor【付诸实践 02】SpringBoot 集成 Dataway 无代码接口工具配置及问题解决(含GreenPlum建表语句、demo源码、测试说明)
- WSL2——Linux C中进程相关操作编程问题
- C#——Lambda表达式与泛型委托DEMO
- Build Tree
- Lunar New Year and a Wander
- Applese 走方格
- mysql 共享锁和排他锁 意向锁 记录锁 Gap Locks Next-Key Locks 插入意向锁介绍
- shiro+jwt进行认证和授权的解决方案代码实例
- 【java学习笔记-io流 文件读写和键盘读写】带缓存的输入/输出流和数据输入/输出流