全面理解document.write()

Airy 发布于2019-08-01 16:09 / 2736人阅读

摘要：标准定义和用法文档节点的方法用于写入文档内容，可以传多个参数，写入的字符串会按解析。在异步引入的和或事件的回调函数中运行，运行完后，最好手动关闭文档写入。写入的标签中的内容会正常运行。

W3C 标准

WHATWG: write()

定义和用法

文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。

语法：document.write()

参数：字符串，可以传多个字符串参数

返回值：undefined

注意事项

如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，
则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。

在异步引入的js和DOMContentLoaded或load事件的回调函数中运行document.write()，
运行完后，最好手动关闭文档写入（document.close()）。

示例代码

在head中运行document.write()，则参数写在body内容的开头。



    


    write()




    


    test
    write()

在body中运行document.write()，则参数写在运行的script标签后面



    
    content




    
    test
    content

同步引用外部js，参数也是写在运行的script标签后面

// syncWrite.js
document.write("test
");

content

test

content

异步引用外部js，必须先运行document.open()清空文档，然后才能运行document.write()，参数写在body内容的开头。
如果不先运行document.open()，直接运行document.write()，则无效且Chrome有如下提示：

// asyncWrite.js
document.open();
document.write("test");
document.close();

test

如果document.write()在DOMContentLoaded或load事件的回调函数中，则不管是在head中，body中，同步的js中，异步的js中，
都会先清空文档（自动调用document.open()），然后运行document.write()，参数写在body内容的开头

test

document.write()也能写入含有script标签的字符串，但是需要转义。写入的script标签中的内容会正常运行。


");



");


test

document.write()可以传入多个参数。

multiArgument

test

参考资料

https://segmentfault.com/a/11...

http://web.jobbole.com/83288/

https://developer.mozilla.org...

GPU云服务器云服务器 document.write 全面理解全面分析全面变革

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50326.html

全面理解document.write()

摘要：标准定义和用法文档节点的方法用于写入文档内容，可以传多个参数，写入的字符串会按解析。在异步引入的和或事件的回调函数中运行，运行完后，最好手动关闭文档写入。写入的标签中的内容会正常运行。 W3C 标准 WHATWG: write() 定义和用法文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。语法：document.write() 参数：字...

imingyu 2019-08-21 11:26 评论0 收藏0
为什么要避免使用 "document.write()"

摘要：每当解析器遇到脚本时，它必须停止并执行它，然后才能继续解析。如果脚本动态地注入另一个脚本，解析器将被迫等待更长时间才能下载资源，这可能会导致一个或多个网络往返并延迟首次渲染页面的时间，导致页面无法加载或花费的时间长于用户放弃。本文是技术圈 google 浏览器前端新特性播报的推送，欢迎大家加入为什么要避免使用 document.write() 最近我们发现如果我们在页面中使用了d...

xiangzhihong 2019-08-26 11:26 评论0 收藏0
一步步搭建物联网系统——无处不在的Javascript

摘要：于是我们需要在的同一文件夹下创建一个文件，在里面写着同时我们的还需要告诉我们的浏览器代码在哪里从数学出发让我们回到第一章讲述的小明的问题，从实际问题下手编程，更容易学会编程。无处不在的Javascript Javascript现在已经无处不在了，也许你正打开的某个网站，他便可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什...

tylin 2019-08-22 10:55 评论0 收藏0
如何优雅高效地插入百度广告

摘要：什么是百度广告最近跟百度广告打了会交道，如果您正在或者即将和百度广告打交道，那太好了，本文一定会让您不虚此行。插入到新闻信息流将百度广告插入到新闻信息流，这是很普遍的做法。总结对于百度广告在不同环境中的投放，有不同的处理方式。什么是百度广告最近跟百度广告打了会交道，如果您正在或者即将和百度广告打交道，那太好了，本文一定会让您不虚此行。百度广告，即百度联盟广告，在这里进行注册后，...

ISherry 2019-08-19 18:09 评论0 收藏0
JavaScript构造器理解

摘要：类类的概念应该是面向对象语言的一个特色，但是并不像，等高级语言那样拥有正式的类，而是多数通过构造器以及原型方式来仿造实现。因此，出现了构造函数方式，它的关键在于构造器概念的引入。于是，这就产生了构造函数原型法的类构造方法。类 Class 类的概念应该是面向对象语言的一个特色，但是JavaScript并不像Java，C++等高级语言那样拥有正式的类，而是多数通过构造器以及原型方式...

PiscesYE 2019-08-21 10:30 评论0 收藏0